C'è un modo per ng-repeat un numero definito di volte invece di dover sempre iterare su un array?
Per esempio, qui sotto voglio che l'elemento della lista si mostri 5 volte assumendo che $scope.number
sia uguale a 5, inoltre incrementando il numero in modo che ogni elemento della lista aumenti come 1, 2, 3, 4, 5
Risultato desiderato:
<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>
Al momento, ng-repeat
accetta solo una collezione come parametro, ma si potrebbe fare così:
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
E da qualche parte nel tuo controller
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Questo ti permetterebbe di cambiare $scope.number
con qualsiasi numero a tuo piacimento e mantenere comunque il binding che stai cercando.
[Ecco un fiddle][1] con un paio di liste che usano la stessa funzione getNumber
.
EDIT 1/6/2014: Le versioni più recenti di Angular 1.x fanno uso della seguente sintassi:
<li ng-repeat="i in getNumber(number) track by $index">
EDIT 9/25/2018: Le versioni più recenti di Angular 1.x ti permettono di fare questo senza una funzione. Se il tuo codice è semplice e non hai bisogno di una funzione getNumber
per altre ragioni, ora puoi ometterlo e fare solo questo:
<div ng-repeat="x in [].constructor(number) track by $index">
Credito a @Nikhil Nambiar dalla sua risposta qui sotto per questo aggiornamento
Ecco un esempio di come potreste farlo. Notate che sono stato ispirato da un commento nei documenti di ng-repeat:
Notate la direttiva ng-repeat:
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Ecco il controllore:
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};