Comment répéter des éléments un nombre de fois spécifique dans AngularJS ?

Répéter des éléments un nombre spécifique de fois avec AngularJS

Lorsque vous travaillez avec AngularJS, la directive ng-repeat est souvent utilisée pour parcourir des tableaux et afficher les données de manière dynamique. Cependant, que se passe-t-il si vous devez répéter des éléments un nombre spécifique de fois, quel que soit le tableau ?

Solution originale (pré-AngularJS 1.3.0)

Pour les versions d'AngularJS avant la version 1.3.0, une solution de contournement était nécessaire :

1. Créez une fonction dans votre contrôleur appelée getNumber() :

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

2. Dans votre HTML, utilisez la fonction getNumber() dans votre ng-repeat pour définir le nombre de fois à répéter :

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

Solution mise à jour (AngularJS 1.3.0 et supérieur)

À partir d'AngularJS 1.3.0, le besoin de la fonction getNumber() est éliminé :

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

Exemple de sortie

En supposant que $scope .number est défini sur 5, le résultat souhaité sera rendu :

<code class="html"><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></code>

Cette technique vous permet de répéter dynamiquement des éléments un nombre spécifique de fois, offrant une plus grande flexibilité dans la création de modèles 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!