Angular JS ng-repeat/array to bugへの追加

Question

私はAngularJS開発の新機能です。わかりにくいバグを見つけたら、非常に簡単なスクリプトをテストしていました。

私のスクリプトは、ユーザーが何かを入力してenterを押すと入力ボックスから文字列を配列に追加するだけで、入力ボックスの下にすべての項目がng-repeatを使用して出力されます。

既にリストにある値を追加しようとする場合を除いて、スクリプトは正常に動作しているようです。もう一度追加した値を追加すると、スクリプトは新しい値を試しても項目の追加を中止します。ここで

は私の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 = ''; 
       } 
      } 
     } 

    }); 

そして、ここでの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> 

は、誰もがこのバグの原因を知っていますか？ ありがとう

Answer 1

デフォルトのトラッキング機能（アイデンティティによって項目を追跡する）では、配列内に重複した項目が存在しません。これは、重複がある場合、コレクション項目とDOM要素との間に1対1のマッピングを維持することができないためです。エントリに重複した項目を許可するには、track by $indexを使用します。次の操作を行います。

<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はngRepeatのドキュメントです。