javascript - Angular JS ng-repeat/adding to array 错误

Question

我是 AngularJS 开发的新手，当我遇到一个我无法完全破译的错误时，我正在测试一个非常简单的脚本。

我的脚本只是在用户键入内容并按回车键时从输入框中向数组添加一个字符串，然后在输入框下方使用 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 元素之间保持一对一的映射。使用 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 的文档。