ng-repeat - Duplicate error vermeiden

Hattet ihr in Verbindung mit ng-repeat schon einmal folgenden Fehler?

[ngRepeat:dupes] Duplicates in a repeater are not allowed

Diesen Fehler bekommt ihr seit AngularJS 1.2, wenn ihr doppelte Elemente in eurem Array habt.

Woher kommt der Fehler?

Seit Verison 1.2 unterstützt AngularJS offiziell Animationen. Wenn man jetzt z.B. ein Element innerhalb des Arrays verschieben möchte, muss AngularJS das Element genau identifizieren können, um die Animation darauf anwenden zu können.

Standardmäßig wird dabei das ganze Element aus dem Array als eindeutiger Identifikator benutzt. Wenn nun zwei oder mehr Elemente den gleichen Identifikator haben, gibt es eine Mehrdeutigkeit und dieser Fehler tritt auf.

Wie behebt man ihn?

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, damit du tiefer in die Thematik einsteigen kannst.

Mehr Informationen zur Angular-Schulung

💡 Hat dir das Tutorial geholfen?

Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst Du die Fragen stellen, die Du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie Dir beantworten.

Jetzt weiter lernen

Natürlich ist es nicht immer gewollt, das ganze Element als eindeutigen Identifikator zu benutzen. Deshalb kann man diesen über eine extra Option track by steuern.

Zu Lösung benutzen wir also track by und brauchen nur noch einen Identifikator, der für jedes Element eindeutig ist. Dies ist der Index, den wir bei ng-repeat über $index bekommen.

Unsere Lösung sieht also folgendermaßen aus:

<li ng-repeat="item in [4,4,4] track by $index">{{item}}</li>