Comment puis-je répéter un élément un nombre spécifique de fois en utilisant ng-repeat dans AngularJS ?

Itérer un nombre défini de fois avec ng-repeat

Traditionnellement, ng-repeat itère sur un élément du tableau, mais il existe des cas où vous devrez peut-être répéter un nombre de fois précis. Cet article explore une méthode pratique pour y parvenir.

Remplacement de l'itération du tableau

Considérez un scénario dans lequel vous souhaitez qu'une liste d'éléments s'affiche cinq fois, numérotés de manière incrémentielle de 1 à 5. Au lieu de en nous appuyant sur un tableau, nous pouvons utiliser l'approche suivante :

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

Définir la fonction getNumber

Dans votre contrôleur, la fonction getNumber créera un tableau de la longueur souhaitée :

<code class="javascript">$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);
}</code>

Impact des versions d'AngularJS

Pour les versions d'AngularJS antérieures à 1.1.5, ce qui précède devrait suffire. Cependant, à partir de la version 1.1.5, un attribut track by $index supplémentaire doit être spécifié dans la directive ng-repeat.

Utilisation et flexibilité

Avec cette approche, vous pouvez modifier dynamiquement $ scope.number à n’importe quelle valeur, en conservant le nombre d’itérations souhaité. Cette technique constitue un moyen pratique de gérer la répétition dans les applications AngularJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!