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

問題：

  • ボタンをクリックすると、リピーターにアイテムが1つだけ追加されます
  • しかし、{{jows}} で配列の内容を確認すると、すべての値が存在します

何故ですか？

4

1 に答える 1

1

式に重複するキーがある場合、エラーが発生しますngRepeat。AngularJS はキーを使用して DOM ノードを項目に関連付けるため、重複キーは禁止されています。

デフォルトでは、コレクションは参照によってキー設定されます。これは、ほとんどの一般的なモデルでは望ましいことですが、インターンされている (共有参照) プリミティブ型では問題になる可能性があります。

このエラーを解決するには、コレクション内のアイテムに一意の ID があることを確認し、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 に答える