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>
当前回答
方法定义
下面的代码定义了一个方法range()，可用于应用程序MyApp的整个作用域。它的行为非常类似于Python的range()方法。
angular.module('MyApp').run(['$rootScope', function($rootScope) {
$rootScope.range = function(min, max, step) {
// parameters validation for method overloading
if (max == undefined) {
max = min;
min = 0;
}
step = Math.abs(step) || 1;
if (min > max) {
step = -step;
}
// building the array
var output = [];
for (var value=min; value<max; value+=step) {
output.push(value);
}
// returning the generated array
return output;
};
}]);
使用
只有一个参数:
<span ng-repeat="i in range(3)">{{ i }}, </span>
0, 1, 2,
有两个参数:
<span ng-repeat="i in range(1, 5)">{{ i }}, </span>
One, two, three, four,
有三个参数:
<span ng-repeat="i in range(-2, .7, .5)">{{ i }}, </span>
-2, -1.5, -1, -0.5, 0, 0.5,
其他回答
在控制器中设置作用域
var range = [];
for(var i=20;i<=70;i++) {
range.push(i);
}
$scope.driverAges = range;
在“Html模板文件”中设置“重复”
<select type="text" class="form-control" name="driver_age" id="driver_age">
<option ng-repeat="age in driverAges" value="{{age}}">{{age}}</option>
</select>
我提出了一个稍微不同的语法，它更适合我一点，并添加了一个可选的下界:
myApp.filter('makeRange', function() {
return function(input) {
var lowBound, highBound;
switch (input.length) {
case 1:
lowBound = 0;
highBound = parseInt(input[0]) - 1;
break;
case 2:
lowBound = parseInt(input[0]);
highBound = parseInt(input[1]);
break;
default:
return input;
}
var result = [];
for (var i = lowBound; i <= highBound; i++)
result.push(i);
return result;
};
});
你可以用哪个
<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>
or
<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>
我稍微调整了一下这个答案，然后想出了这个小提琴。
过滤器定义为:
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>
使用UnderscoreJS:
angular.module('myModule')
.run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);
将此应用到$rootScope使其在任何地方都可用:
<div ng-repeat="x in range(1,10)">
{{x}}
</div>
我想出了一个更简单的版本，用于创建两个定义的数字之间的范围，例如。5至15
参见JSFiddle上的演示
HTML:
<ul>
<li ng-repeat="n in range(5,15)">Number {{n}}</li>
</ul>
控制器:
$scope.range = function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) {
input.push(i);
}
return input;
};
