-1

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

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

问题：

  • 单击按钮时，仅向 li 中继器添加 1 个项目
  • 但是如果你用 {{jows}} 检查数组的内容，所有的值都在那里

这是为什么？

4

1 回答 1

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>
于 2013-09-11T14:50:21.993 回答