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>
当前回答
这是jzm改进后的答案(我不能评论，否则我会评论她/他的答案，因为她/他包含错误)。 函数有一个开始/结束范围值，所以它更灵活，而且……它的工作原理。这个特殊的例子是在一个月的某一天:
$scope.rangeCreator = function (minVal, maxVal) {
var arr = [];
for (var i = minVal; i <= maxVal; i++) {
arr.push(i);
}
return arr;
};
<div class="col-sm-1">
<select ng-model="monthDays">
<option ng-repeat="day in rangeCreator(1,31)">{{day}}</option>
</select>
</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中实现这一点，而不需要任何控制器或工厂。
这是最简单的变体: 只需使用整数数组....
< lig repeat= < n >测试:
最短的答案: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 }}
我使用自定义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>
你可以在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
