AngularJS用数字和范围循环
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>
我调整了一下这个答案，并提出了这个小提琴 。
过滤器定义为：
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>
我想出了一个更简单的版本，用于创建两个定义的数字之间的范围，例如。 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; };
我想出了一个略微不同的语法，它适合我多一点，并添加一个可选的下限：
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>
只有简单的Javascript（你甚至不需要控制器）：
<div ng-repeat="n in [].constructor(10) track by $index"> {{ $index }} </div>
模拟时非常有用
对于那些新的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>
最简单的没有代码解决方案是用范围初始化一个数组，并使用$ index +，但是我想抵消多少：
<select ng-init="(_Array = []).length = 5;"> <option ng-repeat="i in _Array track by $index">{{$index+5}}</option> </select>
您可以在angular.filter模块（ https://github.com/a8m/angular-filter ）中使用'after'或'before'
$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
方法定义
下面的代码定义了一个可用于应用程序MyApp的整个范围的方法range() 。 它的行为与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="for i in range(3)">{{ i }}, </span>
0, 1, 2,
有两个参数：
<span ng-repeat="for i in range(1, 5)">{{ i }}, </span>
1, 2, 3, 4,
有三个参数：
<span ng-repeat="for i in range(-2, .7, .5)">{{ i }}, </span>
-2, -1.5, -1, -0.5, 0, 0.5,
最短的答案：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 }}
使用UnderscoreJS：
angular.module('myModule') .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);
将它应用到$rootScope使其在任何地方都可用：
<div ng-repeat="x in range(1,10)"> {{x}} </div>
很简单的一个：
$scope.totalPages = new Array(10); <div id="pagination"> <a ng-repeat="i in totalPages track by $index"> {{$index+1}} </a> </div>
在控制器中设置范围
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>
对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>
3 2 1 0 -1 -2 -3
<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>
-3 -2 -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
我试了下面，它对我来说工作得很好：
<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>
角1.3.6
这是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>
在你的控制器没有任何改变，你可以使用这个：
ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"
请享用！
嗨，你可以实现这一点使用AngularJS纯净的HTML（NO指令是必需的！）
<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];"> <div ng-if="i>0" ng-repeat="i in x"> <!-- this content will repeat for 5 times. --> <table class="table table-striped"> <tr ng-repeat="person in people"> <td>{{ person.first + ' ' + person.last }}</td> </tr> </table> <p ng-init="x.push(i-1)"></p> </div> </div>
我鞭打了这一点，看到它可能是有用的一些。 （是的，CoffeeScript。Sue我。）
指示
app.directive 'times', -> link: (scope, element, attrs) -> repeater = element.html() scope.$watch attrs.times, (value) -> element.html '' return unless value? element.html Array(value + 1).join(repeater)
使用：
HTML
<div times="customer.conversations_count"> <i class="icon-picture></i> </div>
这可以得到更简单吗？
我对过滤器很谨慎，因为Angular喜欢重新评估它们，没有任何理由，如果像我一样有成千上万的瓶颈，这是一个巨大的瓶颈。
该指令甚至会监视模型中的更改，并相应地更新元素。
晚会到了晚会 但我最终只是这样做：
在你的控制器中：
$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>
<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中实现这一点。
这是最简单的变体：只使用整数数组….
<li ng-repeat="n in [1,2,3,4,5]">test {{n}}</li>
