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>
当前回答
一种简单的方法是使用Underscore.js的_.range()方法。：）
http://underscorejs.org/#range
// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);
// val will be each number in the array not the index.
<div ng-repeat='val in range'>
{{ $index }}: {{ val }}
</div>
其他回答
@Mormegil的解决方案的改进
app.filter('makeRange', function() {
return function(inp) {
var range = [+inp[1] && +inp[0] || 0, +inp[1] || +inp[0]];
var min = Math.min(range[0], range[1]);
var max = Math.max(range[0], range[1]);
var result = [];
for (var i = min; i <= max; i++) result.push(i);
if (range[0] > range[1]) result.reverse();
return result;
};
});
使用
<span ng-repeat="n in [3, -3] | makeRange" ng-bind="n"></span>
Three, two, one, zero, one, two, three
<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>
Minus 3, minus 2, minus 1, 0, 1, 2, 3
<span ng-repeat="n in [3] | makeRange" ng-bind="n"></span>
0, 1, 2, 3
<span ng-repeat="n in [-3] | makeRange" ng-bind="n"></span>
0-1-2-3
一种简单的方法是使用Underscore.js的_.range()方法。：）
http://underscorejs.org/#range
// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);
// val will be each number in the array not the index.
<div ng-repeat='val in range'>
{{ $index }}: {{ val }}
</div>
只有简单的Javascript(你甚至不需要一个控制器):
<div ng-repeat="n in [].constructor(10) track by $index">
{{ $index }}
</div>
在模拟时非常有用
<div ng-init="avatars = [{id : 0}]; flag = true ">
<div ng-repeat='data in avatars' ng-if="avatars.length < 10 || flag"
ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''; flag = avatars.length <= 10 ? true : false">
<img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg">
</div>
</div>
如果你想在html中实现这一点，而不需要任何控制器或工厂。
最简单的无代码解决方案是初始化一个数组的范围，并使用$index +无论多少我想通过偏移:
<select ng-init="(_Array = []).length = 5;">
<option ng-repeat="i in _Array track by $index">{{$index+5}}</option>
</select>
