有没有办法重复定义的次数而不是总是迭代一个数组？
例如，下面我希望列表项显示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>
答案 0 :(得分：551)
目前，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更改为任意数字，并且仍然可以保留您正在寻找的绑定。
Here is a fiddle，其中有几个列表使用相同的getNumber函数。
EDIT 1/6/2014 ：较新版本的Angular 1.x使用以下语法：
<li ng-repeat="i in getNumber(number) track by $index">
编辑9/25/2018 ：较新版本的Angular 1.x允许您在没有功能的情况下执行此操作。如果您的代码很简单，并且由于其他原因您不需要getNumber函数，那么您现在可以省略它并执行此操作：
<div ng-repeat="x in [].constructor(number) track by $index">
从@Nikhil Nambiar下面的回答中了解此更新
答案 1 :(得分：131)
你可以这样做：
<div ng-repeat="i in [1, 2, 3, 4]">
...
</div>
答案 2 :(得分：93)
以下是如何执行此操作的示例。请注意，我受到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);
};
};
答案 3 :(得分：80)
我认为此jsFiddle中的thread可能是您正在寻找的内容。
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
{{item.name}}
</div>
</div>
答案 4 :(得分：54)
一种更简单的方法（例如5次）：
<div ng-repeat="x in [].constructor(5) track by $index">
...
</div>
答案 5 :(得分：49)
我遇到了同样的问题。我遇到过这个帖子，但不喜欢他们在这里的方法。我的解决方案是使用我们已安装的underscore.js。就这么简单：
<ul>
<li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>
这将完全符合您的要求。
答案 6 :(得分：48)
我想保持我的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;
};
});
之后，在视图上可以像这样使用：
<ul>
<li ng-repeat="i in 5 | range">
{{i+1}} <!-- the array will range from 0 to 4 -->
</li>
</ul>
答案 7 :(得分：33)
这真的是UGLY，但是它可以在没有控制器的情况下使用整数或变量：
整数：
<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>
变量：
<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
答案 8 :(得分：16)
有很多方法可以做到这一点。我真的很担心控制器中的逻辑，所以我创建了一个简单的指令来解决重复元素n次的问题。
<强>安装：
可以使用bower install angular-repeat-n
示例：
<span ng-repeat-n="4">{{$index}}</span
生成：1234
它也可以使用范围变量：
<span ng-repeat-n="repeatNum"></span>
<强>来源：
答案 9 :(得分：13)
这只是对已接受答案的轻微变化，但您并不需要创建新功能。只能导入＆＃39;数组＆＃39;在范围内：
<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;
});
有关实例，请参阅this fiddle。
答案 10 :(得分：9)
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是应该出现在此位置的重复次数。
答案 11 :(得分：8)
angular提供了一个非常甜蜜的功能，称为切片 ..使用此功能可以实现您所需要的功能。 e.g。 ng-repeat =“ab in abc.slice（startIndex，endIndex）”
此演示：http://jsfiddle.net/sahilosheal/LurcV/39/将帮助您并告诉您如何使用此“让生活更轻松”的功能。 ：）
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'}];
}
答案 12 :(得分：6)
这是角度1.2.x的答案
基本上它是相同的，稍加修改ng-repeat
<li ng-repeat="i in getNumber(myNumber) track by $index">
这里是小提琴：http://jsfiddle.net/cHQLH/153/
这是因为角度1.2不允许指令中有重复值。这意味着如果您尝试执行以下操作，则会出现错误。
<li ng-repeat="x in [1,1,1]"></li>
答案 13 :(得分：6)
您可以将ng-if指令与ng-repeat
因此，如果num是您需要重复元素的次数：
<li ng-repeat="item in list" ng-if="$index < num">
答案 14 :(得分：3)
对于使用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>
答案 15 :(得分：3)
稍微扩展Ivan的第一个答案，你可以使用一个字符串作为没有track by语句的集合，只要这些字符是唯一的，所以如果用例小于10个数字，这是我要做的问题：
<ul>
<li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>
这有点怪，当然，但很容易看，而不是特别混乱。
答案 16 :(得分：2)
您可以使用此示例。
内部控制器：
$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>
答案 17 :(得分：2)
首先，使用LoDash：
创建一个角度过滤器angular.module('myApp').filter('times', function(){
return function(value){
return _.times(value || 0);
}
});
LoDash times函数能够处理数字的null，undefined，0，数字和字符串表示。
然后，在HTML中使用它：
<span ng-repeat="i in 5 | times">
<!--DO STUFF-->
</span>
或
<span ng-repeat="i in myVar | times">
<!--DO STUFF-->
</span>
答案 18 :(得分：1)
如果n不是太高，另一个选项可能是使用带有n个字符的字符串的split（''）：
<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>
答案 19 :(得分：1)
Angular提供过滤器来修改集合。在这种情况下，集合将为null，即[]，并且过滤器也接受参数，如下所示：
<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中过滤器的强大功能。
答案 20 :(得分：1)
我遇到了同样的问题，这就是我的结果：
(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函数，因为我们已在项目中使用它，但您可以使用本机代码轻松替换它。
答案 21 :(得分：0)
因为迭代字符串，它将为每个字符呈现一个项目：
<li ng-repeat = "k in 'aaaa' track by $index">
{{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>
我们可以使用{strong>丑陋但无代码解决方法使用number|n decimal places原生过滤器。
<li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
{{$index}}
</li>
这样我们就会有mynumber个元素而没有额外的代码。说'0.000'。
我们使用mynumber - 2来补偿0.
它不适用于低于3的数字，但在某些情况下可能有用。
答案 22 :(得分：0)
我需要一个更动态的解决方案 - 我可以增加重复。
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)
}
答案 23 :(得分：0)
我正在创建一个可重复使用的指令，其中最大数字将来自另一个ng-repeat。所以，这是对最佳投票答案的编辑。
只需将控制器上的代码更改为 -
即可$scope.getNumber = function(num) {
var temp = [];
for(var j = 0; j < num; j++){
temp.push(j)
}
return temp;
}
这将返回一个具有指定迭代次数的新数组
答案 24 :(得分：0)
function request($opt, $data) {
$url = ENDPOINT . $opt['object'];
$request = curl_init();curl_setopt($request, CURLOPT_URL, $url);
curl_setopt($request, CURLOPT_POST, TRUE);
curl_setopt($request, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($request, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($request, CURLOPT_USERPWD, USERNAME . ":" . PASSWORD);
$response = array();
foreach ($data as $status) {
$data_string = json_encode($status);
echo "Json: " . $data_string . PHP_EOL;
$headers = array(
'Content-Type: application/json',
'Content-Length: ' . strlen($data_string)
);
curl_setopt($request, CURLOPT_POSTFIELDS, $data_string);
curl_setopt($request, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($request);
$response[] = $result;
if ($result == FALSE) {
die('<p>Curl failed: ' . curl_error($request) . '</p>');
}
}
return $response;
}
答案 25 :(得分：0)
和 2021 版
*ngFor="let x of [].constructor(number)"
答案 26 :(得分：-1)
简单的方法：
public defaultCompetences: Array<number> = [1, 2, 3];
在组件/控制器中，然后：
<div ng-repeat="i in $ctrl.defaultCompetences track by $index">
此代码来自我的打字稿项目，但可以重新排列为纯javascript