AngularJS ng-repeat-Direktive mit Beispiel

ng-repeat-Direktive in AngularJS

Das ng-Wiederholung Richtlinien In AngularJS wird `ng-repeat` verwendet, um im Controller definierte, sich wiederholende Werte anzuzeigen. Manchmal ist es notwendig, eine Liste von Elementen in der Ansicht darzustellen, und `ng-repeat` rendert eine im Controller definierte Liste auf einer Ansichtsseite.

⚠️ Supporthinweis: AngularJS hat erreicht Lebensende am 31. Dezember 2021 und erhält keine weiteren Patches oder Sicherheitskorrekturen. Die folgende Anweisung bleibt für die Wartung bestehender AngularJS 1.x-Anwendungen gültig; in modernen Angular Das Äquivalent ist das *ngFor Strukturrichtlinie.

Beispiel für eine AngularJS-Anweisung „ng-repeat“.

Betrachten wir ein Beispiel für die ng-repeat-Direktive in 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 Erläuterung:

1. Im ControllerZuerst definieren wir das Array der Listenelemente, die in der Ansicht angezeigt werden sollen. Hier ein Array namens TopicNames enthält drei Elemente, jedes ein Name-Wert-Paar.
2. Das Array wird direkt zugewiesen an $scope.TopicNamesDadurch steht es der an diesen Controller gebundenen Ansicht zur Verfügung.
3. Die HTML-Tags <ul> (ungeordnete Liste) und <li> (Listenelement) Die Elemente werden angezeigt. Die ng-repeat-Direktive durchläuft jeden Eintrag im Array, und tpname ist die lokale Variable, die das aktuelle Element enthält, also {{tpname.name}} Gibt seine Namenseigenschaft aus.

⚠️ Korrektur: Die ursprüngliche Erklärung besagte, dass das Array „einer Member-Variablen namens hinzugefügt wurde“. topics„Eine solche Variable existiert im Code nicht – das Array wird direkt zugewiesen.“ $scope.TopicNames, was der Name ist, auf den sich die Ansicht bezieht. Das Einfügen eines zweiten Namens an dieser Stelle ist eine häufige Ursache für eine leere Liste.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe im Browser angezeigt.

AngularJS Mehrere Controller

Zuvor haben wir einen einzelnen Controller gesehen, in dem eine Methode sowohl Addition als auch Subtraktion verarbeitete.tracAnstatt Zahlen zu verarbeiten, können Sie mehrere Controller verwenden, um die Logik sauberer zu trennen. Beispielsweise kann ein Controller Zahlen verarbeiten, während ein anderer Zeichenketten verarbeitet.

Betrachten wir ein Beispiel für die Definition mehrerer Controller in einer AngularJS-Anwendung.

<!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 Erläuterung:

1. Es werden zwei Regler definiert. firstcontroller und secondcontrollerJedes dieser Elemente ordnet seiner eigenen Variable eine Variable zu. kann: pname im ersten lname in dieser Sekunde.
2. In der Ansicht ist der zweite Controller im ersten verschachtelt, und der Ausdruck lautet: lname aus dem inneren Gültigkeitsbereich. Da ein verschachtelter Controller von seinem übergeordneten Controller erbt, {{pname}} würde sich auch hier lösen – die Vererbung fließt nach unten, niemals nach oben.

Wenn der Code erfolgreich ausgeführt wird, wird der Text angezeigt zweiter Controller wird angezeigt.

Anleitung von track by with ng-repeat

Der häufigste Fehler bei ng-repeat ist der Fehler Duplicates in a repeater are not allowedEs tritt auf, sobald eine Sammlung denselben Wert zweimal enthält, und führt dazu, dass die Listendarstellung vollständig gestoppt wird.

Die Ursache ist Identität tracAngularJS benötigt für jedes Element einen stabilen Schlüssel, um DOM-Knoten wiederzuverwenden, anstatt sie bei jedem Digest neu zu erstellen. Standardmäßig wird der Elementwert selbst verwendet, was zu Konflikten zwischen zwei identischen Werten führt.

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

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

Die Wahl zwischen den beiden Formen ist wichtiger, als es zunächst scheint. Tracking by $index Das Problem wird zwar immer behoben, da eine Position per Definition eindeutig ist, aber es bindet jeden DOM-Knoten an einen Slot anstatt an einen Datensatz. Das Neuanordnen oder Filtern der Sammlung führt dann zur Wiederverwendung der falschen Knoten, was sich in fehlerhaften Eingabefeldern bemerkbar macht.ping Der Text der vorherigen Zeile.

Tracking durch einen gültigen Identifikator wie z.B. topic.id Das wird dadurch vollständig vermieden. AngularJS kann jedem Datensatz folgen, während er sich bewegt, und ordnet daher bestehende Knoten neu an, anstatt sie zu zerstören und neu zu erstellen. Bei langen Listen ist dies auch deutlich schneller, da beim erneuten Rendern nur die tatsächlich geänderten Zeilen betroffen sind. $index nur für Arrays von einfachen Werten, die niemals neu angeordnet werden.

Spezielle Eigenschaften innerhalb von ng-repeat verfügbar

Jede Iteration von ng-repeat stellt mehrere schreibgeschützte Eigenschaften in ihrem eigenen Kindbereich bereit. Diese beschreiben die Position des aktuellen Elements innerhalb der Sammlung und umfassen Nummerierung, abwechselnde Stile und Trennzeichen, ohne dem Controller zusätzlichen Zustand hinzuzufügen.

Eine typische Anwendung kombiniert sie mit ng-class für Zebra-Strings.ping, Wie in ng-class="{'row-alt': $odd}"oder mit ng-if, um in jeder Zeile außer der letzten ein Trennzeichen einzufügen, geschrieben ng-if="!$last"Die Anzeige einer für Menschen lesbaren Zeilennummer ist einfach {{$index + 1}}Da der Index nullbasiert ist, werden alle sechs Eigenschaften automatisch neu berechnet, sobald sich die Sammlung ändert; eine manuelle Neuberechnung ist daher nicht erforderlich.

Häufige ng-repeat-Fehler und wie man sie behebt

Die meisten Probleme mit ng-repeat entstehen durch doppelte Werte, durch Vererbung des Gültigkeitsbereichs oder dadurch, dass die Direktive auf dem falschen Element steht. Jedes der folgenden Symptome benennt seine Ursache.

• Doppelte Einträge in einem Repeater sind nicht zulässig: Die Sammlung enthält einen wiederholten Wert. Hinzufügen track by $indexoder besser noch, track by ein einzigartiges Anwesen.
• Die Liste liefert kein Ergebnis: Der Name in der Ansicht stimmt nicht mit der Eigenschaft im Gültigkeitsbereich überein. Geben Sie die Auflistung aus mit {{TopicNames}} um zu bestätigen, dass es angekommen ist.
• Jedes Element wird wiederholt, einschließlich des Wrappers: ng-repeat wurde auf dem Container anstatt auf dem Element platziert. Verschieben Sie es dorthin. <li> or <tr>.
• Beim Bearbeiten einer Eingabe wird die falsche Zeile geändert: Die Liste ist tracgeked von $index während Artikel neu bestellt werden. Track durch einen stabilen Bezeichner stattdessen.
• Änderungen innerhalb der Schleife bleiben nicht erhalten: Jede Iteration hat ihren eigenen Kindbereich, daher erzeugt das Schreiben in einen primitiven Datentyp eine lokale Kopie. Schreiben Sie in eine Objekteigenschaft, wie zum Beispiel item.done.

Häufig gestellte Fragen