Comment itérer un nombre défini de fois dans AngularJS sans tableau ?

Une méthode alternative à ng-repeat : itérer un nombre de fois défini

Dans AngularJS, la directive ng-repeat nous permet d'itérer sur un tableau d'éléments. Cependant, dans certains scénarios, nous pouvons souhaiter répéter un modèle spécifique plusieurs fois, même en l'absence de tableau. Cet article répond à ce besoin.

Solution

AngularJS avant la version 1.3.0 ne prenait pas en charge l'itération directe sur un nombre de fois spécifié. La solution de contournement impliquait l'introduction d'une fonction personnalisée et la manipulation de tableaux.

Voici la syntaxe ng-repeat modifiée :

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

Dans votre contrôleur, définissez la fonction getNumber :

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

Cette fonction renvoie un tableau d'une longueur spécifiée, simulant le comportement d'une itération sur un tableau.

Mise à jour pour AngularJS >= 1.3.0

Les versions plus récentes d'AngularJS offrent une solution simplifiée :

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

Cette variante supprime le besoin d'une fonction personnalisée.

Conclusion

Les deux méthodes offrent un moyen flexible et efficace d'itérer un nombre défini de fois dans AngularJS , permettant aux développeurs de créer des interfaces utilisateur dynamiques et adaptables.

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!