Gibt es eine Möglichkeit, ng-Wiederholung eine definierte Anzahl von Zeiten, anstatt immer über ein Array zu iterieren?
Zum Beispiel möchte ich, dass das Listenelement 5 Mal auftaucht, wenn $scope.number gleich 5 ist und zusätzlich die Zahl erhöht wird, so dass jedes Listenelement wie 1, 2, 3, 4, 5 erhöht wird
Gewünschtes Ergebnis:
<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>
Im Moment akzeptiert "ng-repeat" nur eine Sammlung als Parameter, aber Sie könnten dies tun:
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
Und irgendwo in deinem Controller:
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Dies würde es Ihnen ermöglichen, $scope.number
in eine beliebige Zahl zu ändern und trotzdem die gewünschte Bindung zu erhalten.
[Hier ist ein Fiddle][1] mit einer Reihe von Listen, die die gleiche getNumber
Funktion verwenden.
EDIT 1/6/2014: Neuere Versionen von Angular 1.x verwenden die folgende Syntax:
<li ng-repeat="i in getNumber(number) track by $index">
EDIT 9/25/2018: Neuere Versionen von Angular 1.x ermöglichen es Ihnen, dies ohne eine Funktion zu tun. Wenn Ihr Code einfach ist und Sie aus anderen Gründen keine "getNumber"-Funktion benötigen, können Sie diese jetzt weglassen und nur dies tun:
<div ng-repeat="x in [].constructor(number) track by $index">
Dank an @Nikhil Nambiar aus seiner Antwort unten für diese Aktualisierung
Hier ist ein Beispiel dafür, wie Sie dies tun können. Beachten Sie, dass ich durch einen Kommentar in den ng-repeat-Dokumenten inspiriert wurde:
Beachten Sie die ng-repeat-Anweisung:
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Hier ist der Controller:
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};
Ich denke, dieses [jsFiddle][1] aus diesem thread könnte das sein, wonach Sie suchen.
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
{{item.name}}
</div>
</div>