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的文档。

Angular JS ng-repeat /添加到数组bug

1 个答案: