Question

所以我有一个像这样的简单角度块

    <script>

        function smallToDo($scope){

            $scope.addToDo = function(){

                $scope.jows.push($scope.newToDo);

            }

            $scope.jows = ["kevin", "lise"];


        }

    </script>    

    <div ng-controller="smallToDo">

        <h3>To Do items:</h3>

        <input type="text" ng-model="newToDo"> <button ng-click="addToDo()">Add to do</button>

        <ul>
            <li ng-repeat="jow in jows"><a href="">{{jow}}</a></li>
        </ul>

        {{jows}}

    </div>

问题：

单击按钮
但是，如果您使用{{jows}}检查数组的内容，那么所有值都在那里

为什么？

Answer 1

如果ngRepeat表达式中存在重复的键，则会发生错误。禁止重复键，因为AngularJS使用键将DOM节点与项目关联。

默认情况下，集合通过引用进行键控，这对于大多数常见模型来说是理想的，但对于实际的基本类型（共享引用）可能会有问题。

要解决此错误，请确保集合中的项目具有使用track by语法的唯一标识，以指定如何跟踪模型与DOM之间的关联。

要解决上述示例，可以使用track by $index来解决，这会导致项目按其在数组中的位置而不是其值来键入。

<script>

    function smallToDo($scope){

        $scope.addToDo = function(){

            $scope.jows.push($scope.newToDo);

        }

        $scope.jows = ["kevin", "lise"];


    }

</script>    

<div ng-controller="smallToDo">

    <h3>To Do items:</h3>

    <input type="text" ng-model="newToDo"> <button ng-click="addToDo()">Add to do</button>

    <ul>
        <li ng-repeat="jow in jows track by $index"><a href="">{{jow}}</a></li>
    </ul>

    {{jows}}

</div>

ng-repeat和array不重复所有数组值

1 个答案: