小开

最佳答案

更新(9/25/2018)

新版本的AngularJS (>= 1.3.0)允许你只需要一个变量就可以做到这一点(不需要函数):

<li ng-repeat="x in [].constructor(number) track by $index">
<span>\{\{ $index+1 }}</span>
</li>

$scope.number = 5;

在第一次提出这个问题时，这是不可能的。感谢@Nikhil Nambiar在下面的回答

原始(5/29/2013)

目前，ng-repeat只接受一个集合作为参数，但你可以这样做:

<li ng-repeat="i in getNumber(number)">
<span>\{\{ $index+1 }}</span>
</li>

在你的控制器中:

$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}

这将允许你将$scope.number更改为任何你喜欢的数字，并且仍然保持你正在寻找的绑定。

编辑(1/6/2014)——AngularJS (>= 1.1.5)的新版本需要track by $index:

<li ng-repeat="i in getNumber(number) track by $index">
<span>\{\{ $index+1 }}</span>
</li>

使用相同的getNumber函数这里有一把小提琴和一对列表。

小开

我认为这个jsFiddle来自这个线程可能是你正在寻找的。

<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
\{\{item.name}}
</div>
</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);
};
};

小开

我需要一个更动态的解决方案-我可以增加重复。

超文本标记语言

<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>

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
primaryValue++;
$scope.newUserCount.push(primaryValue)
}

小开

你可以用这个例子。

在控制器:

$scope.data = {
'myVal': 33,
'maxVal': 55,
'indexCount': function(count) {
var cnt = 10;
if (typeof count === 'number') {
cnt = count;
}
return new Array(cnt);
}
};

在HTML代码端选择元素的例子:

<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>

小开

我也遇到了同样的问题。我偶然发现了这条线索，但不喜欢他们在这里的方法。我的解决方案是使用我们已经安装好的underscore.js。其实很简单:

<ul>
<li ng-repeat="n in _.range(1,6)"><span>\{\{n}}</span></li>
</ul>

这正是你想要的。

小开

你可以这样做:

<div ng-repeat="i in [1, 2, 3, 4]">
...
</div>

小开

angular给出了一个非常可爱的函数片..使用它你可以达到你想要的效果。例如ng-repeat="ab in abc.slice(startIndex,endIndex)"< / em >

这个演示: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'}]; }

小开

Angular提供了过滤器来修改集合。在这种情况下，集合将为空，即[]，过滤器也接受参数，如下所示:

<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中过滤器的强大功能。

小开

由于遍历字符串，它将为每个字符呈现一个项:

<li ng-repeat = "k in 'aaaa' track by $index"> \{\{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below. </li>

我们可以使用这个丑陋的但没有代码的变通方法，使用number|n decimal places本机过滤器。

<li ng-repeat="k in (0|number:mynumber -2 ) track by $index"> \{\{$index}} </li>

这样我们就有了mynumber元素，没有额外的代码。说'0.000'。< br > 我们使用mynumber - 2来补偿0.
对于低于3的数字，它将不起作用，但在某些情况下可能有用

小开

下面是angular 1.2.x的答案

基本上是一样的，只是稍微修改了ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

这是小提琴:http://jsfiddle.net/cHQLH/153/

这是因为angular 1.2不允许在指令中重复值。这意味着如果您尝试执行以下操作，将会得到一个错误。

<li ng-repeat="x in [1,1,1]"></li>

小开

如果n不是太高，另一种选择是使用split(")对n个字符的字符串:

<div ng-controller="MainCtrl"> <div ng-repeat="a in 'abcdefgh'.split('')">\{\{$index}}</div> </div>

小开

有很多方法可以做到这一点。我真的很困扰在我的控制器中有逻辑，所以我创建了一个简单的指令来解决重复一个元素n次的问题。

安装:

该指令可以使用bower install angular-repeat-n安装

例子:

<span ng-repeat-n="4">\{\{$index}}</span

生产:1234

它也可以使用范围变量:

<span ng-repeat-n="repeatNum"></span>

来源:

< a href = " https://github.com/connorbode/angular-repeat-n " > Github < / >

小开

最简单的答案: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

超文本标记语言

<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>

.．.其中repeatCount是该位置应该出现的重复数。

小开

这真的很丑，但它可以在没有控制器的情况下为整数或变量工作:

整数:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">\{\{$index}}</span>

变量:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">\{\{$index}}</span>

小开

我想保持我的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}}  </li> </ul>

小开

对于使用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>

小开

我也遇到过同样的问题，这就是我得出的结论:

(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>

< a href = " http://codepen.io/nicooga/pen/PqVXPj/?编辑=101" rel="nofollow">LIVE EXAMPLE .

我使用下划线的times函数，因为我们已经在项目中使用它，但你可以很容易地用本机代码替换它。

小开

你可以在ng-repeat中使用ng-if指令

因此，如果num是元素需要重复的次数:

<li ng-repeat="item in list" ng-if="$index < num">

小开

这只是对公认答案的轻微变化，但实际上不需要创建新函数。仅在作用域中导入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; });

请参阅这小提琴中的实际示例。

小开

首先，使用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">  </span>

或

<span ng-repeat="i in myVar | times">  </span>

小开

一个更简单的方法是(以5次为例):

<div ng-repeat="x in [].constructor(5) track by $index"> ... </div>

小开

我正在创建一个可重用的指令，其中最大数字将来自另一个ng-repeat。这是对最佳投票答案的编辑。

只需将控制器上的代码更改为这个-

$scope.getNumber = function(num) { var temp = []; for(var j = 0; j < num; j++){ temp.push(j) } return temp; }

这将返回一个具有指定迭代次数的新数组

小开

简单的方法:

public defaultCompetences: Array<number> = [1, 2, 3];

在组件/控制器中，然后:

<div ng-repeat="i in $ctrl.defaultCompetences track by $index">

这段代码来自我的typescript项目，但可以重新安排到纯javascript

小开

在Ivan的第一个答案上展开一点，只要字符是唯一的，你可以使用一个字符串作为集合，而不使用track by语句，所以如果用例少于10个数字(就像在问题中那样)，我将简单地这样做:

<ul> <li ng-repeat="n in '12345'"><span>\{\{n}}</span></li> </ul>

当然，这有点古怪，但看起来足够简单，也不是特别令人困惑。

小开

$scope.number = 5; <div ng-repeat="n in [] | range:$scope.number"> <span>\{\{$index}}</span> </div>

小开

2021年的版本

*ngFor="let x of [].constructor(number)"

方法ng重复定义的次数而不是重复数组?

更新(9/25/2018)

原始(5/29/2013)

最简单的答案:2行代码