方法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>

当前回答

对于使用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>

其他回答

你可以这样做:

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

首先，使用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>

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

安装:

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

例子:

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

生产:1234

它也可以使用范围变量:

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

来源:

Github

我也遇到了同样的问题。我偶然发现了这条线索，但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装好的underscore.js。其实很简单:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

这正是你想要的。

下面是angular 1.2.x的答案

基本上是一样的，只是稍微修改了ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

这是小提琴:http://jsfiddle.net/cHQLH/153/

这是因为angular 1.2不允许在指令中重复值。这意味着如果您尝试执行以下操作，将会得到一个错误。

<li ng-repeat="x in [1,1,1]"></li>

推荐文章