Açısal JS ng tekrarı/yineleme dizisine hata

Question

AngularJS geliştirmede çok yeniyim, ve oldukça basit bir betiği test ettim ve bir hataya rastladığımda, oldukça deşifre edemedim.

Komut dosyası, kullanıcı bir şey ve isabetler girdiğinde ve giriş kutusunun altında bir giriş kutusundan bir diziye basitçe bir dize ekler, daha sonra tüm öğeler ng-yineleme kullanılarak yazdırılır.

Kod, zaten listede bulunan bir değer eklemeye çalıştığımda, iyi çalışıyor gibi görünüyor. Tekrar eklenmiş bir değer eklerseniz, yazı geri dönüp yeni bir değer denememe rağmen öğeler eklemeye son verir. İşte

benim 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 = ''; 
       } 
      } 
     } 

    }); 

Ve burada html kısmıdır:

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

herkes bu hatayı neden olduğunu biliyor mu? Teşekkürler

Answer 1

Varsayılan izleme işlevi (öğeleri kimlikleriyle izler) dizilerde yinelenen öğelere izin vermez. Bunun nedeni, çoğaltmalar olduğunda, koleksiyon öğeleri ve DOM öğeleri arasında bire bir eşleştirmeyi sürdürmek mümkün değildir. Girişlerinizde yinelenen öğelere izin vermek için track by $index'u kullanın. Aşağıdakileri yapın:

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

HerengRepeat için belgelerdir.