方法ng重复定义的次数而不是重复数组?

是否有一种方法可以ng-repeat定义的次数，而不是总是要迭代一个数组?

例如，下面我希望列表项显示5次，假设为$scope。数字等于5，加上增加的数字，所以每个列表项都增加，如1,2,3,4,5

预期的结果:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

当前回答

首先，使用LoDash创建一个角过滤器:

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

LoDash times函数能够处理null, undefined, 0，数字和数字的字符串表示。

然后，在你的HTML中像这样使用它:

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

其他回答

2021年的版本

*ngFor="let x of [].constructor(number)"

有很多方法可以做到这一点。我真的很困扰在我的控制器中有逻辑，所以我创建了一个简单的指令来解决重复一个元素n次的问题。

安装:

该指令可以使用安装器install angular-repeat-n安装

例子:

<span ng-repeat-n="4">{{$index}}</span

生产:1234

它也可以使用范围变量:

<span ng-repeat-n="repeatNum"></span>

来源:

Github

你可以这样做:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>

我正在创建一个可重用的指令，其中最大数字将来自另一个ng-repeat。这是对最佳投票答案的编辑。

只需将控制器上的代码更改为这个-

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

这将返回一个具有指定迭代次数的新数组

对于使用CoffeeScript的用户，您可以使用范围理解:

指令

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

或控制器

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

模板

<div ng-repeat="i in range">[ the rest of your code ]</div>

推荐文章