AngularJS For循环与数字和范围

Angular确实在HTML指令中提供了一些使用数字的for循环的支持:

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something
</div>

但是，如果作用域变量包含一个具有动态数字的范围，那么每次都需要创建一个空数组。

在控制器中

var range = [];
for(var i=0;i<total;i++) {
  range.push(i);
}
$scope.range = range;

在HTML中

<div data-ng-repeat="i in range">
  do something
</div>

这是可行的，但这是不必要的，因为我们在循环中根本不会使用范围数组。有人知道设置最小/最大值的范围或规则吗?

喜欢的东西:

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>

当前回答

不需要在你的控制器中做任何改变，你可以这样使用:

ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"

享受吧!

其他回答

最短的答案:2行代码

JS(在你的AngularJS控制器中)

$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat

HTML

<div data-ng-repeat="i in range.slice(0,myCount) track by $index"></div>

.．.其中myCount是应该出现在这个位置的星星的数量。

您可以使用$index进行任何跟踪操作。例如，如果你想打印索引上的一些突变，你可以在div中放入以下代码:

{{ ($index + 1) * 0.5 }}

你可以在angular中使用'after'或'before'过滤器。过滤模块(https://github.com/a8m/angular-filter)

$scope.list = [1,2,3,4,5,6,7,8,9,10]

HTML:

<li ng-repeat="i in list | after:4">
  {{ i }}
</li>

结果: 5 6 7 8 9 10

只有简单的Javascript(你甚至不需要一个控制器):

<div ng-repeat="n in [].constructor(10) track by $index">
    {{ $index }}
</div>

在模拟时非常有用

我尝试了以下方法，对我来说效果不错:

<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>

角1.3.6

使用UnderscoreJS:

angular.module('myModule')
    .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);

将此应用到$rootScope使其在任何地方都可用:

<div ng-repeat="x in range(1,10)">
    {{x}}
</div>

推荐文章