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的数字。但在某些情况下可能会有用。