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;
<div data-ng-repeat="i in range">
do something
</div>
像这样：
<div data-ng-repeat="i in 1 .. 100">
do something
</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;
};
});
使用repeat的方式如下：
<div ng-repeat="n in [] | range:100">
do something
</div>
我想到了一个更简单的版本，用于创建在两个定义的数字之间的范围，例如5到15。
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;
};
var a; void 0 === a 真正的未定义。 - Andreas Louv只需纯JavaScript（甚至不需要控制器）：
<div ng-repeat="n in [].constructor(10) track by $index">
{{ $index }}
</div>
在模拟时非常有用
Referencing "constructor" field in Angular expressions is disallowed! Expression: [].constructor(10)。也许这在之前的 Angular 版本中可以运行，或者我做错了什么。 - AWolf我想出了一个略微不同的语法，更适合我，并添加了一个可选的下限：
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>
<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>
$digest迭代，例如：ng-repeat="n in [1, maxValue] | makeRange"？ - pspahn对于那些刚接触angularjs的人，可以使用$index获取索引。
例如：
<div ng-repeat="n in [] | range:10">
do something number {{$index}}
</div>
使用Gloopy的便捷过滤器时，将打印以下内容：
做一些第0个
做一些第1个
做一些第2个
做一些第3个
做一些第4个
做一些第5个
做一些第6个
做一些第7个
做一些第8个
做一些第9个
使用 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>
我使用我的自定义ng-repeat-range指令：
/**
* Ng-Repeat implementation working with number ranges.
*
* @author Umed Khudoiberdiev
*/
angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) {
return {
replace: true,
scope: { from: '=', to: '=', step: '=' },
link: function (scope, element, attrs) {
// returns an array with the range of numbers
// you can use _.range instead if you use underscore
function range(from, to, step) {
var array = [];
while (from + step <= to)
array[array.length] = from += step;
return array;
}
// prepare range options
var from = scope.from || 0;
var step = scope.step || 1;
var to = scope.to || attrs.ngRepeatRange;
// get range of numbers, convert to the string and add ng-repeat
var rangeString = range(from, to + 1, step).join(',');
angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']');
angular.element(element).removeAttr('ng-repeat-range');
$compile(element)(scope);
}
};
}]);
而HTML代码是
<div ng-repeat-range from="0" to="20" step="5">
Hello 4 times!
</div>
或者简单地说
<div ng-repeat-range from="5" to="10">
Hello 5 times!
</div>
或者甚至只是简单地
<div ng-repeat-range to="3">
Hello 3 times!
</div>
或者只是
<div ng-repeat-range="7">
Hello 7 times!
</div>
element.attr('ng-repeat', 'n in [' + rangeString + ']');的方式不起作用... - Stefan Walther<select ng-init="(_Array = []).length = 5;">
<option ng-repeat="i in _Array track by $index">{{$index+5}}</option>
</select>
以下代码定义了一个名为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>
1, 2, 3, 4,
有三个参数：
<span ng-repeat="i in range(-2, .7, .5)">{{ i }}, </span>
-2, -1.5, -1, -0.5, 0, 0.5,
在不改变控制器的情况下，您可以使用以下代码：
ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"
享受吧！