Existe-t-il un moyen de ng-repeat un nombre défini de fois au lieu de devoir toujours itérer sur un tableau ?
Par exemple, ci-dessous, je veux que l'élément de la liste apparaisse 5 fois en supposant que $scope.number
est égal à 5 et en incrémentant le nombre pour que chaque élément de la liste s'incrémente comme 1, 2, 3, 4, 5.
Résultat souhaité :
<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>
Pour le moment, ng-repeat
n'accepte qu'une collection comme paramètre, mais vous pourriez faire ceci :
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
Et quelque part dans votre contrôleur :
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Cela vous permettrait de remplacer $scope.number
par n'importe quel nombre et de conserver la liaison que vous recherchez.
[Voici un exemple][1] avec quelques listes utilisant la même fonction getNumber
.
MISE À JOUR 1/6/2014 : Les versions plus récentes d'Angular 1.x utilisent la syntaxe suivante :
<li ng-repeat="i in getNumber(number) track by $index">
MISE À JOUR 25/9/2018 : Les versions plus récentes d'Angular 1.x vous permettent de le faire sans fonction. Si votre code est simple et que vous n'avez pas besoin d'une fonction getNumber
pour d'autres raisons, vous pouvez maintenant omettre cela et juste faire ceci :
<div ng-repeat="x in [].constructor(number) track by $index">
Crédit à @Nikhil Nambiar de sa réponse ci-dessous pour cette mise à jour
[1] :
Voici un exemple de la façon dont vous pouvez procéder. Notez que j'ai été inspiré par un commentaire dans la documentation de ng-repeat :
.Notez la 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>
Voici le contrôleur :
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};
Je pense que ce [jsFiddle][1] de ce [fil de discussion][2] pourrait être ce que vous recherchez.
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
{{item.name}}
</div>
</div>
[1] :
[2] : https://groups.google.com/forum/?fromgroups#!topic/angular/LjwlVYMulN8