javascript-Angular JS ng-repeat /添加到数组错误

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

有谁知道是什么引起了这个错误？
谢谢

解决方法:

默认跟踪功能(按项目标识跟踪项目)不允许在数组中重复项目.这是因为当存在重复项时,不可能在收集项和DOM元素之间维持一对一的映射.使用$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的文档.

标签：angularjs,ng-repeat,javascript
来源： https://codeday.me/bug/20191118/2031606.html