ng-repeat定义的次数，而不是重复的数组？
有没有办法ng – 重复一个定义的次数，而不是总是迭代一个数组？
例如，下面我想列表项目出现5次，假设$scope.number等于5，此外增加数字，所以每个列表项增加像1,2,3,4,5
预期结果：
<ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <li><span>5</span></li> </ul>
目前， ng-repeat只接受一个集合作为参数，但你可以这样做：
<ul> <li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li> </ul>
在你的控制器的某个地方：
$scope.number = 5; $scope.getNumber = function(num) { return new Array(num); }
这将允许您将$scope.number更改$scope.number任意数字，并且仍然保持您正在寻找的绑定。
这里有一个使用相同的getNumber函数的几个列表的小提琴 。
编辑1/6/2014 ：较新版本的Angular使用以下语法：
<li ng-repeat="i in getNumber(number) track by $index">
你可以这样做：
<div ng-repeat="i in [1, 2, 3, 4]"> ... </div>
这里是一个如何做到这一点的例子。 请注意，我受到ng-repeat文档中的评论的启发： http : //jsfiddle.net/digitalzebra/wnWY6/
注意ng-repeat指令：
<div ng-app> <div ng-controller="TestCtrl"> <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div> </div> </div>
这里是控制器：
function TestCtrl($scope) { $scope.range = function(n) { return new Array(n); }; };
我认为这个jsFiddle从这个线程可能是你在找什么。
<div ng-app ng-controller="Main"> <div ng-repeat="item in items | limitTo:2"> {{item.name}} </div> </div>
我遇到了同样的问题。 我遇到这个线程，但不喜欢他们在这里的方法。 我的解决scheme是使用我们已经安装的underscore.js。 这很简单：
<ul> <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li> </ul>
这将做你正在寻找的东西。
我想保持我的html非常小，所以定义了一个小的filter，像其他人一样创build数组[0,1,2，…]
angular.module('awesomeApp') .filter('range', function(){ return function(n) { var res = []; for (var i = 0; i < n; i++) { res.push(i); } return res; }; });
之后，在视图可以使用这样的：
<ul> <li ng-repeat="i in 5 | range"> {{i+1}} <li> </ul>
这真的很糟糕，但它没有一个控制器的整数或variables：
整数：
<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>
variables：
<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
有很多方法可以做到这一点。 我真的很在乎控制器中的逻辑，所以我创build了一个简单的指令来解决n次重复元素的问题。
安装：
该指令可以使用bower install angular-repeat-n进行安装
例：
<span ng-repeat-n="4">{{$index}}</span
产生： 1234
它也可以使用一个范围variables：
<span ng-repeat-n="repeatNum"></span>
资源：
Github上
更简单的方法是（例如5次）：
<div ng-repeat="x in [].constructor(5) track by $index"> ... </div>
这只是被接受的答案的一个小小的变化，但是你并不需要创build一个新的函数。 只能在范围内导入'Array'：
<div ng-app="myapp"> <div ng-controller="ctrlParent"> <ul> <li ng-repeat="i in counter(5) track by $index"> <span>{{$index+1}}</span></li> </ul> </div> </div>
var app = angular.module('myapp',[]); app.controller('ctrlParent',function($scope){ $scope.myNumber = 5; $scope.counter = Array; });
看这个小提琴的生动的例子。
最简单的答案：2行代码
JS（在你的AngularJS控制器中）
$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy
HTML
<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>
…其中repeatCount是应该出现在这个位置的重复次数。
angular给出了一个非常甜美的function称为切片 ..使用这个，你可以实现你在找什么。 例如ng-repeat =“abc.slice（startIndex，endIndex）”中的ab
这个演示： http : //jsfiddle.net/sahilosheal/LurcV/39/将帮助你，并告诉你如何使用这个“让生活变得轻松”的function。 🙂
HTML：
<div class="div" ng-app > <div ng-controller="Main"> <h2>sliced list(conditional NG-repeat)</h2> <ul ng-controller="ctrlParent"> <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li> </ul> <h2>unsliced list( no conditional NG-repeat)</h2> <ul ng-controller="ctrlParent"> <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li> </ul> </div>
CSS：
ul { list-style: none; } .div{ padding:25px; } li{ background:#d4d4d4; color:#052349; }
NG-JS：
function ctrlParent ($scope) { $scope.abc = [ { "name": "What we do", url: "/Home/AboutUs" }, { "name": "Photo Gallery", url: "/home/gallery" }, { "name": "What we work", url: "/Home/AboutUs" }, { "name": "Photo play", url: "/home/gallery" }, { "name": "Where", url: "/Home/AboutUs" }, { "name": "playground", url: "/home/gallery" }, { "name": "What we score", url: "/Home/AboutUs" }, { "name": "awesome", url: "/home/gallery" }, { "name": "oscar", url: "/Home/AboutUs" }, { "name": "american hustle", url: "/home/gallery" } ]; } function Main($scope){ $scope.items = [{sort: 1, name: 'First'}, {sort: 2, name: 'Second'}, {sort: 3, name: 'Third'}, {sort: 4, name:'Last'}]; }
下面是angular1.2.x的答案
基本上是一样的，对ng-repeat稍作修改
<li ng-repeat="i in getNumber(myNumber) track by $index">
这里是小提琴： http : //jsfiddle.net/cHQLH/153/
这是因为angular1.2不允许在指令中重复的值。 这意味着如果您尝试执行以下操作，将会出现错误。
<li ng-repeat="x in [1,1,1]"></li>
你可以用ng-repeat来使用ng-if指令
所以，如果num是你需要重复元素的次数：
<li ng-repeat="item in list" ng-if="$index < num">
对于使用CoffeeScript的用户，您可以使用范围理解：
指示
link: (scope, element, attrs) -> scope.range = [1..+attrs.range]
或控制器
$scope.range = [1..+$someVariable] $scope.range = [1..5] # Or just an integer
模板
<div ng-repeat="i in range">[ the rest of your code ]</div>
首先，使用LoDash创build一个angular度滤波器：
angular.module('myApp').filter('times', function(){ return function(value){ return _.times(value || 0); } });
LoDash时间函数能够处理null，undefined，0，数字和string表示forms的数字。
然后，在你的HTML中使用它：
<span ng-repeat="i in 5 | times"> <!--DO STUFF--> </span>
要么
<span ng-repeat="i in myVar | times"> <!--DO STUFF--> </span>
你可以使用这个例子。
内部控制器：
$scope.data = { 'myVal': 33, 'maxVal': 55, 'indexCount': function(count) { var cnt = 10; if (typeof count === 'number') { cnt = count; } return new Array(cnt); } };
HTML代码端select元素的示例：
<select ng-model="data.myVal" value="{{ data.myVal }}"> <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option> </select>
如果n不是太高，另一个选项可能是使用split（''）与一个n个字符的string：
<div ng-controller="MainCtrl"> <div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div> </div>
我需要一个更dynamic的解决scheme – 在这里我可以增加重复。
HTML
<div ng-repeat="n in newUserCount"> <input type="text" value="" name="newuser{{n}}"/> </div>
复制者控制
<span class="helper" ng-click="duplicateUser()"> Create another user with the same permissions </span>
JS
$scope.newUserCount = Array('1'); var primaryValue = 1; $scope.duplicateUser = function() { primaryValue++; $scope.newUserCount.push(primaryValue) }
Angular提供filter来修改集合。 在这种情况下，集合将为空，即[]，filter也需要参数，如下所示：
<div id="demo"> <ul> <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li> </ul> </div>
JS：
module.filter('fixedNumber', function() { return function(emptyarray, number) { return Array(number); } }); module.controller('myCtrl', ['$scope', function($scope) { $scope.number = 5; }]);
这个方法与上面提到的方法非常相似，并不一定要优于AngularJS中的滤波器。
我遇到了同样的问题，这是我出来的：
(function () { angular .module('app') .directive('repeatTimes', repeatTimes); function repeatTimes ($window, $compile) { return { link: link }; function link (scope, element, attrs) { var times = scope.$eval(attrs.repeatTimes), template = element.clone().removeAttr('repeat-times'); $window._(times).times(function (i) { var _scope = angular.extend(scope.$new(), { '$index': i }); var html = $compile(template.clone())(_scope); html.insertBefore(element); }); element.remove(); } } })();
…和html：
<div repeat-times="4">{{ $index }}</div>
实例
我使用下划线的times函数作为我们已经在项目中使用它的地方，但是你可以很容易地用本地代码replace它。
我正在创build一个可重用的指令，其中最大数将来自另一个ng-repeat。 所以，这是最好的投票答案的编辑。
只要将控制器上的代码更改为这个 –
$scope.getNumber = function(num) { var temp = []; for(var j = 0; j < num; j++){ temp.push(j) } return temp; }
这将返回一个具有指定迭代次数的新数组
因为这个声明打印了4个元素：
<li ng-repeat = "k in 'aaaa' track by $index"> {{$index}} </li>
我们可以使用这个丑陋但没有足迹的解决方法，使用number|n decimal places本地filter。
<li ng-repeat="k in (0|number:mynumber -2 ) track by $index"> {{$index}} </li>
这样你就可以有没有额外的代码mynumber元素。
记得减去2我的mynumber以避免前两个“0”。 字符预置为小数位（如“0.0000”）。
编辑：不适用于小于3的数字。但在某些情况下可能会有用。
