Angular JS ng-repeat/Hinzufügen zum Array Bug

Question

Ich bin sehr neu in AngularJS Entwicklung, und ich habe ein sehr einfaches Skript getestet, als ich auf einen Fehler stieß, den ich nicht ganz entziffern kann.

Mein Skript fügt einem Array einfach eine Zeichenkette aus einem Eingabefeld hinzu, wenn der Benutzer etwas eingibt und die Eingabetaste drückt, und unterhalb des Eingabefelds werden alle Elemente mit ng-repeat ausgedruckt.

Das Skript scheint gut zu funktionieren, außer wenn ich versuche, einen Wert hinzuzufügen, der bereits in der Liste ist. Wenn ich einen Wert hinzufüge, der bereits hinzugefügt wurde, beendet das Skript das Hinzufügen von Elementen, auch wenn ich zurück gehe und einen neuen Wert versuche.

Hier ist mein javascript:

var myApp = angular.module('myApp',[]); 
    myApp.controller('ctrl1',function($scope){ 
     $scope.list = []; 

     $scope.addItem = function(keyEvent){ 
      if(keyEvent.which === 13) 
      { 

       if(angular.isDefined($scope.name) && $scope.name!='') 
       { 
        $scope.list.push($scope.name); 
        $scope.name = ''; 
       } 
      } 
     } 

    }); 

Und hier ist der Teil html:

<div ng-controller = "ctrl1"> 
<input type = "text" ng-model = "name" placeholder = "Enter item to add to list" ng-keypress = "addItem($event)"/> 
<ul ng-repeat = "item in list"> 
<li>{{item}}</li> 
</ul> 
</div> 

Weiß jemand, was diesen Fehler verursacht? Danke

Answer 1

Die Standard-Tracking-Funktion (die Elemente nach ihrer Identität verfolgt) erlaubt keine doppelten Elemente in Arrays. Dies liegt daran, dass es bei Duplikaten nicht möglich ist, eine Eins-zu-eins-Zuordnung zwischen Auflistungselementen und DOM-Elementen aufrechtzuerhalten. Verwenden Sie track by $index, um doppelte Einträge in Ihren Einträgen zuzulassen. Folgendes tun:

<div ng-controller = "ctrl1"> 
    <input type = "text" ng-model = "name" placeholder = "Enter item to add to list" ng-keypress = "addItem($event)"/> 
    <ul ng-repeat = "item in list track by $index"> 
     <li>{{item}}</li> 
    </ul> 
</div> 

Here die Dokumentation für ngRepeat ist.