在角度js

Question

我正在尝试学习angular-js，所以我创建了一个迷你应用程序，用户在数组中添加元素，数组的值显示在上面。该应用程序工作正常，但在添加数组中已存在的值时崩溃。

这是源代码。                    

<div ng-app="myApp" ng-controller="myCtrl">

    <p>Name: <input type="text" ng-model="firstName"></p>
    <a ng-click='add(firstName)' >click me</a>

    <ul>
        <li ng-repeat="x in names">{{x}}
    </ul>
    {{msg}}
</div>

<script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

        $scope.add = function(arg) {
            alert("adding:"+arg);
            $scope.names.push(arg);
        }

        $scope.names = ["Emil", "Tobias", "Linus"];
    });
</script>

</body>
</html>

这是控制台错误，例如我添加两次名称John：

  

错误：[ngRepeat：dupes]   http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=x%20in%20names&p1=string%3AJohn&p2=John       在错误（本机）       在http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416       在http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:280:375       在Object.fn（http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:130:77）       在r。$ digest（http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:131:149）       at r。$ apply（http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:78）       在HTMLAnchorElement。 （http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:254:126）       at If（http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:35:367）       在HTMLAnchorElement.Hf.d（http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:35:314）

发生此错误时，该功能仍然有效，因为警报弹出但输入的值未添加到数组中。我没有实现任何js-fiddle，因为它工作正常。我使用chrome浏览器

Answer 1

将ng-repeat替换为：

<ul>
   <li ng-repeat="x in names track by $index">{{x}}
</ul>

AngularJS默认情况下会跟踪元素的值，如果有重复，则会失败。 $ index对应于循环数组时AngularJS使用的names[$index]的$ index。