Angular ngRepeat Track by Index
![Angular ngRepeat Track by Index](/img/Angular/feature-image---angular-track-by-index.webp)
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.
- Es weist allen Kindern desselben Elternteils denselben Index zu.
- Es weist fortlaufende ganze Zahlen beginnend bei 0 zu, wenn der Elternteil keinen Index für seine Kinder angibt.
- 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.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook