AngularJS ng-repeat-Direktive mit Beispiel

By: James Hartmann James Hartmann
Hours Aktualisiert

โšก Intelligente Zusammenfassung

Die ng-repeat-Direktive in AngularJS rendert fรผr jedes Element einer im Controller-Scope definierten Sammlung eine Kopie des jeweiligen Elements. Sie wandelt ein Array in eine Liste, eine Tabelle oder beliebiges sich wiederholendes Markup um, ohne dass eine manuelle Schleife erforderlich ist.

  • ๐Ÿ” Kernverhalten: ng-repeat klont sein Host-Element einmal pro Element, daher gehรถrt die Direktive auf das zu wiederholende Element, nicht auf dessen Container.
  • ๐Ÿท๏ธ Schleifenvariable: Der Name vor dem Wort โ€žinโ€œ wird zu einem lokalen Alias โ€‹โ€‹fรผr das aktuelle Element innerhalb dieses Klons.
  • ๐Ÿงฌ Kinderbereich: Jede Iteration erhรคlt ihren eigenen Kindbereich, weshalb die Zuweisung eines primitiven Werts innerhalb der Schleife den Elternbereich nicht erreicht.
  • ๐Ÿ”‘ Identitรคtsschutz Tracking: A tracDer Ausdruck k teilt AngularJS mit, wie Elemente identifiziert werden sollen, und ist erforderlich, wenn eine Sammlung wiederholte Werte enthรคlt.
  • ๐Ÿ”ข Eingebaute Einheimische: Eigenschaften wie $index, $first und $last stehen innerhalb jeder Iteration zur Nummerierung und Formatierung zur Verfรผgung.
  • โš ๏ธ Support-Status: AngularJS hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht und erhรคlt keine weiteren Sicherheitsupdates mehr.
MEHR LESEN

AngularJS ng-repeat-Direktive

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:

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.

ng-repeat-Direktive in AngularJS

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.

AngularJS Mehrere Controller

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

AngularJS Mehrere Controller

ร„HNLICHE ARTIKEL

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.

Eigenschaft Typ Wert
$index Nummer Position des aktuellen Elements, beginnend bei 0
$first Boolean Trifft nur auf den ersten Punkt zu
$last Boolean Trifft nur auf den letzten Punkt zu
$middle Boolean Gilt fรผr jedes Element, das weder das erste noch das letzte ist.
$even Boolean Trifft zu, wenn $index gerade ist
$odd Boolean Wahr, wenn $index ungerade ist.

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

Ja, mit ng-repeat="(key, value) in myObject"Beachten Sie, dass AngularJS die Objektschlรผssel in sortierter Reihenfolge und nicht in Einfรผgereihenfolge durchlรคuft. Daher ist ein Array sicherer, wenn die Reihenfolge wichtig ist.

Verkettung von Filtern im Ausdruck, wie in ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Das ursprรผngliche Array bleibt unverรคndert; nur die gerenderte Reihenfolge und die Teilmenge รคndern sich.

Ja. AI tools map ng-repeat to *ngFor und track von bis trackBy-Funktionen. รœberprรผfen Sie Filter sorgfรคltig, da Angular die integrierten Filter- und orderBy-Pipes absichtlich entfernt hat.

KI-Tools erkennen Funktionsaufrufe innerhalb des Wiederholungsausdrucks, die bei jedem Digest erneut ausgefรผhrt werden, und fehlende track-Klauseln, die einen vollstรคndigen DOM-Neuaufbau erzwingen. Beides sind die รผblichen Ursachen fรผr eine trรคge Liste.

Nutzen Sie das Kommentarformular. ng-repeat-start und ng-repeat-end, wodurch eine Reihe von Geschwisterelementen wiederholt wird. Dies ist in Tabellen wichtig, da ein zusรคtzliches div-Element den Markup-Code beschรคdigen wรผrde.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: