Html ng-repeat 定义的次数而不是重复数组的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16824853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Way to ng-repeat defined number of times instead of repeating over array?
提问by Malcr001
Is there a way to ng-repeata defined number of times instead of always having to iterate over an array?
有没有办法达到ng-repeat定义的次数，而不必总是遍历数组？
For example, below I want the list item to show up 5 times assuming $scope.numberequal to 5 in addition incrementing the number so each list item increments like 1, 2, 3, 4, 5
例如，下面我希望列表项显示 5 次，假设$scope.number等于 5 并增加数字，以便每个列表项增加 1、2、3、4、5
Desired result:
想要的结果：
<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>
回答by Dan
Update (9/25/2018)
更新 (9/25/2018)
Newer versions of AngularJS (>= 1.3.0) allow you to do this with only a variable (no function needed):
较新版本的 AngularJS (>= 1.3.0) 允许你只用一个变量（不需要函数）来做到这一点：
<li ng-repeat="x in [].constructor(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
$scope.number = 5;
This was not possible at the time the question was first asked. Credit to @Nikhil Nambiar from his answer below for this update
这在首次提出问题时是不可能的。感谢@Nikhil Nambiar 对此更新的回答
Original (5/29/2013)
原版 (5/29/2013)
At the moment, ng-repeatonly accepts a collection as a parameter, but you could do this:
目前，ng-repeat只接受一个集合作为参数，但你可以这样做：
<li ng-repeat="i in getNumber(number)">
<span>{{ $index+1 }}</span>
</li>
And somewhere in your controller:
在您的控制器中的某处：
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
This would allow you to change $scope.numberto any number as you please and still maintain the binding you're looking for.
这将允许您随意更改$scope.number为任何数字，并且仍然保持您正在寻找的绑定。
EDIT (1/6/2014)-- Newer versions of AngularJS (>= 1.1.5) require track by $index:
编辑（2014 年 1 月 6 日）——较新版本的 AngularJS（>= 1.1.5）需要track by $index：
<li ng-repeat="i in getNumber(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
Here is a fiddlewith a couple of lists using the same getNumberfunction.
回答by akonsu
you can do this:
你可以这样做：
<div ng-repeat="i in [1, 2, 3, 4]">
...
</div>
回答by Polaris878
Here is an example of how you could do this. Note that I was inspired by a comment in the ng-repeat docs: http://jsfiddle.net/digitalzebra/wnWY6/
这是一个如何执行此操作的示例。请注意，我的灵感来自 ng-repeat 文档中的评论：http: //jsfiddle.net/digitalzebra/wnWY6/
Note the ng-repeat directive:
注意 ng-repeat 指令：
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Here is the controller:
这是控制器：
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};
回答by jeffmayeur
回答by Nikhil Nambiar
A simpler approach would be (for an example of 5 times):
更简单的方法是（例如 5 次）：
<div ng-repeat="x in [].constructor(5) track by $index">
...
</div>
回答by Mark Roach
I ran into the same issue. I came across this thread, but didn't like the methods they had here. My solution was using underscore.js, which we had already installed. It's as simple as this:
我遇到了同样的问题。我遇到了这个线程，但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装的 underscore.js。就这么简单：
<ul>
<li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>
This will do exactly what you're looking for.
这将完全符合您的要求。
回答by miguelr
I wanted to keep my html very minimal, so defined a small filter that creates the array [0,1,2,...] as others have done:
我想保持我的 html 非常小，所以定义了一个小的过滤器来创建数组 [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;
};
});
After that, on the view is possible to use like this:
之后，在视图上可以像这样使用：
<ul>
<li ng-repeat="i in 5 | range">
{{i+1}} <!-- the array will range from 0 to 4 -->
</li>
</ul>
回答by M J
This is really UGLY, but it works without a controller for either an integer or variable:
这真的很丑，但它可以在没有整数或变量的控制器的情况下工作：
integer:
整数：
<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>
variable:
多变的：
<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
回答by connorbode
There are many ways to do this. I was really bothered at having the logic in my controller so I created a simple directive to solve the problem of repeating an element n-times.
有很多方法可以做到这一点。我真的很烦恼在我的控制器中有逻辑，所以我创建了一个简单的指令来解决重复元素 n 次的问题。
Installation:
安装：
The directive can be installed using bower install angular-repeat-n
该指令可以使用安装 bower install angular-repeat-n
Example:
例子：
<span ng-repeat-n="4">{{$index}}</span
produces: 1234
产生： 1234
It also works using a scope variable:
它也可以使用范围变量：
<span ng-repeat-n="repeatNum"></span>
Source:
来源：
回答by Sylvain Leroux
This is only a slight variation on the accepted answer, but you don't really need to create a newfunction. Only to import 'Array' in the scope:
这只是已接受答案的轻微变化，但您实际上并不需要创建新函数。仅在范围内导入“数组”：
<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;
});
See this fiddlefor a live example.
看到这个小提琴的一个活生生的例子。
