Piste ngRepeat Angular par index

1. Suivi par $index dans AngularJS
2. Utiliser Track by $index dans AngularJS

Cet article vous aide à comprendre la piste ngRepeat par $index et à l’utiliser dans vos applications Angular.

Suivi par $index dans AngularJS

Angular est un framework JavaScript moderne avec de nombreuses fonctionnalités intégrées. AngularJS fournit une liaison de données bidirectionnelle, ce qui signifie que toute modification apportée au modèle sera reflétée dans la vue et vice versa.

Il fournit également ngRepeat, qui répète les éléments DOM pour chaque élément d’un tableau ou d’un objet. La piste ngRepeat par $index vous permet de spécifier quels éléments doivent être répétés à l’aide de leur numéro d’index.

Le ngRepeat est une directive qui peut être ajoutée au modèle HTML d’une application Angular. Il est utilisé pour créer des listes et peut prendre une expression comme argument.

L’expression ngRepeat prend deux paramètres : un nom de variable et une valeur pour ce nom de variable.

Ces variables sont ensuite itérées, chaque itération étant affectée à la variable une par une. Le problème est que ngRepeat ne reconstruira pas les composants DOM pour les objets récemment affichés.

Nous utilisons la piste par $index pour pallier ce problème.

La piste ngRepeat par $index fournit un identifiant unique pour chaque élément de la liste.

Cet identificateur peut être utile lorsque vous souhaitez accéder à un élément particulier de la liste ou lorsque vous disposez d’un tableau d’objets et que vous devez accéder aux propriétés de ces objets ; c’est incroyablement bénéfique.

La directive track by $index fonctionne comme suit.

1. Il attribue le même index à tous les enfants du même parent.
2. Il affecte des entiers séquentiels à partir de 0 si le parent ne spécifie pas d’index pour ses enfants.
3. La directive ne crée pas de nouveaux index pour ses enfants si elle les spécifie déjà.

Utiliser Track by $index dans AngularJS

Cette section montre comment utiliser la piste Angular par $index dans votre application Angular à l’aide d’un exemple.

Créez un nouveau projet avec la commande ci-dessous.

ng new angular-track-by-index

Ajoutez le code JavaScript suivant dans le dossier de l’application.

 var app = angular.module('Adil',[]);
        app.controller('Demo',["$scope",function($scope){
            $scope.delft = [];
            $scope.add = function () {
                $scope.delft.push($scope.example );
            }
        }]);

Nous avons utilisé $scope dans le code JavaScript, alors qu’est-ce que $scope ? Dans AngularJS, le $scope est un objet intégré qui contient les données et les opérations de l’application.

Vous pouvez ajouter des attributs à un objet $scope dans une fonction de contrôleur et leur appliquer une valeur ou une fonction.

Le $scope sert de lien entre le contrôleur et la vue (HTML). Il envoie des informations du contrôleur à la vue.

Ajoutez le code HTML suivant.

<h3>Example of Angular track by index</h3>
<p>Write anything in the box and press enter, you will understand the concept of Angular track by index</p>
<div ng-app="Adil">
  <div class="Demo" ng-controller="Demo">
    <form action="
               " ng-submit="add()">
      <input type="text" ng-model="example" />
    </form>
    <p ng-repeat="list in delft track by $index">{{list}}</p>
  </div>
</div>

Dans cet article, nous avons vu que la piste ngRepeat par $index est l’une des fonctionnalités essentielles d’Angular qui permet aux développeurs de parcourir un tableau et de restituer le même code HTML pour chaque élément du tableau.

Avec cette directive, les développeurs peuvent facilement créer un modèle réutilisable pour n’importe quelle liste HTML.

Cliquez ici pour vérifier la démonstration en direct du code comme mentionné ci-dessus.