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>
当前回答
这是最简单的变体: 只需使用整数数组....
< lig repeat= < n >测试:
其他回答
我稍微调整了一下这个答案，然后想出了这个小提琴。
过滤器定义为:
var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
像这样重复使用:
<div ng-repeat="n in [] | range:100">
do something
</div>
迟到了。但我最后还是这样做了:
在你的控制器中:
$scope.repeater = function (range) {
var arr = [];
for (var i = 0; i < range; i++) {
arr.push(i);
}
return arr;
}
Html:
<select ng-model="myRange">
<option>3</option>
<option>5</option>
</select>
<div ng-repeat="i in repeater(myRange)"></div>
这是最简单的变体: 只需使用整数数组....
< lig repeat= < n >测试:
使用UnderscoreJS:
angular.module('myModule')
.run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);
将此应用到$rootScope使其在任何地方都可用:
<div ng-repeat="x in range(1,10)">
{{x}}
</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
