ng-repeat 添加项目 (AngularJs 1.2.26)答案

【问题标题】：ng-repeat add items (AngularJs 1.2.26)ng-repeat 添加项目 (AngularJs 1.2.26)
【发布时间】：2014-11-05 18:43:11
【问题描述】：

我正在使用 ng-repeat 测试代码，但是使用旧版本的angular，它可以工作，但使用最新版本它不起作用！

我解释一下：

我测试了这段代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.js"></script>

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items">{{item}}</li>
        </ul>
        <input ng-model="newItem" type="text"></input>
        <button ng-click="add(newItem)">Add</button>
    </div>
</div>

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

app.controller('MyCtrl', function($scope) {
    $scope.items = ["A", "B", "C", "D"];
    $scope.add = function(item) {
        $scope.items.push(item);
    };

});
</script>

当我添加几个项目时，它工作正常！使用 angular.js/1.1.0 版本它添加了一个新项目

但是用最新版本就不行了！我们可以添加一项，但如果我们添加多于一项，则会出现此错误：

错误：[ngRepeat:dupes] 不允许在转发器中重复。使用“track by”表达式指定唯一键。中继器：项目中的项目，重复键：字符串：d

所以我的问题是我们如何在 ng-repeat 中添加新闻项目和新闻版本？

谢谢！

【问题讨论】：

答案就在问题中！ :) 使用 track by ，比如这里：stackoverflow.com/questions/26232764/…

标签： angularjs

【解决方案1】：

请看这里https://docs.angularjs.org/error/ngRepeat/dupes

添加到您的ng-repeat track by $index 即：

<li ng-repeat="item in items track by $index">

下面的演示：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="item in items track by $index">{{item}}</li>
        </ul>
        <input ng-model="newItem" type="text"></input>
        <button ng-click="add(newItem)">Add</button>
    </div>
</div>

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

app.controller('MyCtrl', function($scope) {
    $scope.items = ["A", "B", "C", "D"];
    $scope.add = function(item) {
        $scope.items.push(item);
    };

});
</script>

【讨论】：

【解决方案2】：

它可以工作，但是如果你添加一个已经包含在数组中的键，它就无法识别唯一的项目（因为它们是相同的）。

要解决此问题，您必须使用：

    <li ng-repeat="item in items track by $index"

http://jsfiddle.net/v87kgwud/

【讨论】：