Directive AngularJS ng-repeat avec exemple

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

La directive ng-repeat d'AngularJS génère une copie d'un élément pour chaque élément d'une collection définie dans le contrôleur. Elle transforme un tableau en liste, en tableau ou en tout autre balisage répétitif sans nécessiter de boucle manuelle.

  • (I.e. Comportement fondamental : La directive ng-repeat clone son élément hôte une fois par élément ; elle doit donc être placée sur l'élément répété, et non sur son conteneur.
  • 🏷️ Variable de boucle : Le nom précédant le mot « in » devient un alias local pour l'élément actuel à l'intérieur de ce clone.
  • 🧬 Portée de l'enfant : Chaque itération reçoit sa propre portée enfant, c'est pourquoi l'affectation d'une primitive à l'intérieur de la boucle n'atteint pas le parent.
  • (I.e. Identite Tracking: A tracL'expression k indique à AngularJS comment identifier les éléments, et elle est requise lorsqu'une collection contient des valeurs répétées.
  • (I.e. Variables locales intégrées : Des propriétés telles que $index, $first et $last sont disponibles dans chaque itération pour la numérotation et le style.
  • ⚠️ Statut de support : AngularJS a atteint sa fin de vie le 31 décembre 2021 et ne reçoit plus aucun correctif de sécurité.
En savoir plus

Directive ng-repeat d'AngularJS

Directive ng-repeat dans AngularJS

Le ng-répétition directive Dans AngularJS, la directive `ng-repeat` permet d'afficher des valeurs répétitives définies dans le contrôleur. Parfois, il est nécessaire d'afficher une liste d'éléments dans la vue ; `ng-repeat` permet alors d'afficher cette liste définie dans le contrôleur sur une page de vue.

⚠️ Avis d'assistance : AngularJS a atteint fin de vie le 31 décembre 2021 et ne reçoit plus aucun correctif ni mise à jour de sécurité. La directive ci-dessous reste valable pour la maintenance des applications AngularJS 1.x existantes ; dans les versions modernes Angulaire l'équivalent est le *ngFor Directive structurelle.

Exemple de directive AngularJS ng-repeat

Prenons l'exemple de la directive ng-repeat dans AngularJS :

Directive ng-repeat dans AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Explication:

  1. Dans l' contrôleurNous commençons par définir le tableau des éléments de liste à afficher dans la vue. Il s'agit ici d'un tableau appelé TopicNames contient trois éléments, chacun étant une paire nom-valeur.
  2. Le tableau est directement affecté à $scope.TopicNames, ce qui la rend disponible pour la vue liée à ce contrôleur.
  3. Les balises HTML <ul> (liste non ordonnée) et <li> (élément de liste) affiche les éléments. La directive ng-repeat parcourt chaque entrée du tableau, et tpname est la variable locale contenant l'élément actuel, donc {{tpname.name}} imprime sa propriété de nom.

⚠️ Correction : L'explication originale indiquait que le tableau était « ajouté à une variable membre appelée topics« Cette variable n'existe pas dans le code ; le tableau est directement affecté à $scope.TopicNames, qui est le nom auquel la vue fait référence. L'ajout d'un deuxième nom à cet endroit est une cause fréquente de liste vide.

Si le code s'exécute correctement, le résultat suivant s'affiche dans le navigateur.

Directive ng-repeat dans AngularJS

Contrôleurs multiples AngularJS

Nous avons précédemment vu un contrôleur unique dans lequel une seule méthode gérait à la fois l'addition et la soustraction.tracPour une gestion plus propre des nombres, vous pouvez utiliser plusieurs contrôleurs. Par exemple, un contrôleur peut traiter des nombres tandis qu'un autre traite des chaînes de caractères.

Prenons l'exemple de la définition de plusieurs contrôleurs dans une application AngularJS.

Contrôleurs multiples AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Explication:

  1. Deux contrôleurs sont définis, firstcontroller et secondcontrollerChacune associe une variable à sa propre portée: pname dans le premier, lname dans la seconde.
  2. Dans cette vue, le deuxième contrôleur est imbriqué dans le premier, et l'expression se lit comme suit : lname du périmètre interne. Étant donné qu'un contrôleur imbriqué hérite de son parent, {{pname}} Cela résoudrait également ce problème : l'héritage se transmet de bas en haut, jamais de haut en bas.

Si le code est exécuté avec succès, le texte deuxième contrôleur est affiché.

Contrôleurs multiples AngularJS

Ne manquez pas:

Comment utiliser track par avec ng-repeat

L'erreur la plus courante lors de la commande ng-repeat est l'erreur suivante : Duplicates in a repeater are not allowedCela se produit dès qu'une collection contient deux fois la même valeur, et l'affichage de la liste est complètement interrompu.

La cause est l'identité. tracAngularJS a besoin d'une clé stable pour chaque élément afin de pouvoir réutiliser les nœuds DOM au lieu de les reconstruire à chaque mise à jour. Par défaut, il utilise la valeur de l'élément elle-même, ce qui peut entraîner un conflit entre deux valeurs identiques.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Meilleur for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

Choisir entre les deux formulaires est plus important qu'il n'y paraît au premier abord. Tracking by $index Cela résout toujours l'erreur, car une position est unique par définition, mais cela lie chaque nœud DOM à un emplacement plutôt qu'à un enregistrement. Réorganiser ou filtrer la collection réutilise alors les mauvais nœuds, ce qui se traduit par des champs de saisie non valides.ping Le texte de la ligne précédente.

Tracking par un identifiant authentique tel que topic.id Cela évite complètement ce problème. AngularJS peut suivre chaque enregistrement lors de son déplacement, réorganisant ainsi les nœuds existants au lieu de les détruire et de les reconstruire. Sur les longues listes, c'est également nettement plus rapide, car un nouveau rendu ne concerne que les lignes qui ont réellement changé. $index uniquement pour les tableaux de valeurs simples qui ne sont jamais réorganisées.

Propriétés spéciales disponibles à l'intérieur de ng-repeat

Chaque itération de ng-repeat expose plusieurs propriétés en lecture seule dans sa propre portée enfant. Elles décrivent la position de l'élément courant au sein de la collection, ce qui concerne la numérotation, l'alternance des styles et les séparateurs, sans ajouter d'état supplémentaire au contrôleur.

Propriétés Type Valeur
$index Numéro Position de l'élément actuel, en commençant par 0
$first Boolean Vrai uniquement pour le premier élément
$last Boolean Vrai uniquement pour le dernier élément.
$middle Boolean Cela s'applique à tout élément qui n'est ni le premier ni le dernier.
$even Boolean Vrai lorsque $index est pair
$odd Boolean Vrai lorsque $index est impair

Une utilisation typique les combine avec ng-class pour les striures zébréesping, Comme dans ng-class="{'row-alt': $odd}", ou avec ng-if pour afficher un séparateur sur chaque ligne sauf la dernière, écrit ng-if="!$last"Afficher un numéro de ligne lisible par l'homme est simplement {{$index + 1}}L'indexation commençant à zéro, les six propriétés sont recalculées automatiquement à chaque modification de la collection ; aucun recalcul manuel n'est donc nécessaire.

Erreurs courantes liées à ng-repeat et comment les corriger

La plupart des problèmes liés à ng-repeat proviennent de valeurs dupliquées, d'un héritage de portée ou d'une directive placée sur le mauvais élément. Chaque symptôme ci-dessous indique sa cause.

  • Les doublons dans un répéteur ne sont pas autorisés : La collection contient une valeur répétée. Ajouter track by $index, ou mieux, track by une propriété unique.
  • La liste ne donne aucun résultat : Le nom dans la vue ne correspond pas à la propriété dans la portée. Imprimez la collection avec {{TopicNames}} pour confirmer sa réception.
  • Chaque élément se répète, y compris l'élément conteneur : La directive ng-repeat a été placée sur le conteneur au lieu de l'élément. Déplacez-la sur le conteneur. <li> or <tr>.
  • La modification d'une entrée modifie la mauvaise ligne : la liste est tracked par $index pendant que les articles se réapprovisionnent. Track par un identifiant stable à la place.
  • Les modifications effectuées à l'intérieur de la boucle ne sont pas conservées : Chaque itération possède sa propre portée enfant ; ainsi, écrire dans une primitive crée une copie locale. Écrivez dans une propriété d’objet, telle que : item.done.

FAQ

Oui, en utilisant ng-repeat="(key, value) in myObject"Notez qu'AngularJS itère sur les clés des objets dans l'ordre de tri, et non dans l'ordre d'insertion ; un tableau est donc plus sûr lorsque la séquence est importante.

Chaînez les filtres dans l'expression, comme dans ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Le tableau d'origine reste inchangé ; seuls l'ordre de rendu et le sous-ensemble changent.

Oui. AI mapper les outils ng-repeat à *ngFor et track par à tracFonctions kBy. Vérifiez attentivement les filtres, car Angular a délibérément supprimé les pipes filter et orderBy intégrés.

Les outils d'IA repèrent les appels de fonction à l'intérieur de l'expression de répétition, qui sont réexécutés à chaque actualisation, et les éléments manquants track par des clauses qui forcent des reconstructions complètes du DOM. Ces deux éléments sont les causes habituelles d'une liste lente.

Utilisez le formulaire de commentaires, ng-repeat-start et ng-repeat-end, qui répète une série d'éléments frères. Ceci est important dans les tableaux, où une balise div supplémentaire casserait le balisage.

Résumez cet article avec :