Angular ngRepeat Track by Index

1. Verfolgen von $index in AngularJS
2. Verwendung von Track by $index in AngularJS

Dieser Artikel hilft Ihnen, den ngRepeat-Track von $index zu verstehen und ihn in Ihren Angular-Anwendungen zu verwenden.

Verfolgen von $index in AngularJS

Angular ist ein modernes JavaScript-Framework mit vielen integrierten Funktionen. AngularJS bietet eine bidirektionale Datenbindung, was bedeutet, dass alle am Modell vorgenommenen Änderungen in der Ansicht widergespiegelt werden und umgekehrt.

Es bietet auch ngRepeat, das DOM-Elemente für jedes Element in einem Array oder Objekt wiederholt. Die ngRepeat-Spur von $index ermöglicht es Ihnen, anhand ihrer Indexnummer anzugeben, welche Elemente wiederholt werden sollen.

Das ngRepeat ist eine Direktive, die dem HTML-Template einer Angular-Anwendung hinzugefügt werden kann. Es wird zum Erstellen von Listen verwendet und kann einen Ausdruck als Argument annehmen.

Der ngRepeat-Ausdruck nimmt zwei Parameter: einen Variablennamen und einen Wert für diesen Variablennamen.

Diese Variablen werden dann iteriert, wobei jede Iteration der Variablen einzeln zugewiesen wird. Das Problem ist, dass ngRepeat die DOM-Komponenten für kürzlich angezeigte Objekte nicht neu erstellt.

Wir verwenden den Track von $index, um dieses Problem zu lösen.

Der ngRepeat-Track von $index bietet eine eindeutige Kennung für jedes Element in der Liste.

Dieser Bezeichner kann hilfreich sein, wenn Sie auf ein bestimmtes Element in der Liste zugreifen möchten oder wenn Sie über ein Array von Objekten verfügen und auf Eigenschaften innerhalb dieser Objekte zugreifen müssen. das ist unglaublich vorteilhaft.

Die Direktive track by $index funktioniert wie folgt.

1. Es weist allen Kindern desselben Elternteils denselben Index zu.
2. Es weist fortlaufende ganze Zahlen beginnend bei 0 zu, wenn der Elternteil keinen Index für seine Kinder angibt.
3. Die Direktive erstellt keine neuen Indizes für ihre Kinder, wenn sie diese bereits spezifiziert.

Verwendung von Track by $index in AngularJS

Dieser Abschnitt zeigt anhand eines Beispiels, wie Sie Angular track by $index in Ihrer Angular-App verwenden.

Erstellen Sie mit dem folgenden Befehl ein neues Projekt.

ng new angular-track-by-index

Fügen Sie den folgenden JavaScript-Code im App-Ordner hinzu.

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

Wir haben $scope im JavaScript-Code verwendet, also was ist $scope? In AngularJS ist $scope ein eingebautes Objekt, das Anwendungsdaten und Operationen enthält.

Sie können einem $scope-Objekt innerhalb einer Controller-Funktion Attribute hinzufügen und ihnen einen Wert oder eine Funktion zuweisen.

Der $scope dient als Bindeglied zwischen dem Controller und der View (HTML). Es sendet Informationen vom Controller an die Ansicht.

Fügen Sie den folgenden HTML-Code hinzu.

<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>

In diesem Artikel haben wir gesehen, dass der ngRepeat-Track von $index eine der wesentlichen Funktionen von Angular ist, die es Entwicklern ermöglicht, ein Array zu durchlaufen und denselben HTML-Code für jedes Element im Array zu rendern.

Mit dieser Anweisung können Entwickler ganz einfach wiederverwendbare Vorlagen für beliebige HTML-Listen erstellen.

Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.