NG-重复添加项目（AngularJs 1.2.26） [英] ng-repeat add items (AngularJs 1.2.26)

问题描述

我测试一个code。与NG-重复，
但与老版的角，它的作品，但与最新版本，它不工作！

我解释一下：

我测试这个code：

 ＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.js＆GT;＆LT; / SCRIPT＆GT ;＆LT; D​​IV NG-应用=对myApp＆GT;
    ＆LT; D​​IV NG控制器=MyCtrl＆GT;
        ＆LT; UL＆GT;
            ＆LT;李NG重复=中的项项＆GT; {{}项}＆LT; /李＆GT;
        ＆LT; / UL＆GT;
        ＆LT;输入NG模型=的newitem类型=文本＆GT;＆LT; /输入＆GT;
        ＆LT;按钮NG点击=添加（的newitem）＆gt;添加＆LT; /按钮＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;脚本＆GT;
VAR应用= angular.module（'对myApp'，[]）;app.controller（'MyCtrl'，函数（$范围）{
    $ scope.items =A，B，C，D];
    $ scope.add =功能（项目）{
        $ scope.items.push（项目）;
    };}）;
＆LT; / SCRIPT＆GT;
 

当我加入severarls项目，它工作正常！与angular.js / 1.1.0版本
它添加一个新项目

但随着最新版本这是行不通的！
我们可以添加一个项目，但如果我们增加一个以上的项目，它使这个错误：

  

错误：[ngRepeat：愚弄]在一个中继器不允许重复。使用轨道由前pression指定唯一键。中继器：在项目的项目，重复键：字符串：D

所以我的问题是我们如何才能增加的消息版本NG重复新闻项目？

谢谢！

解决方案

请在这里看到的https：/ /docs.angularjs.org/error/ngRepeat/dupes

由$索引添加到您的 NG-重复 跟踪如：

 ＆LT;李NG重复=中的项项跟踪由$指数＆GT;
 

以下演示：

\r

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=对myApp＆GT;\r
    ＆LT; D​​IV NG控制器=MyCtrl＆GT;\r
        ＆LT; UL＆GT;\r
            ＆LT;李NG重复=中的项项跟踪由$指数＆GT; {{}项}＆LT; /李＆GT;\r
        ＆LT; / UL＆GT;\r
        ＆LT;输入NG模型=的newitem类型=文本＆GT;＆LT; /输入＆GT;\r
        ＆LT;按钮NG点击=添加（的newitem）＆gt;添加＆LT; /按钮＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
VAR应用= angular.module（'对myApp'，[]）;\r
\r
app.controller（'MyCtrl'，函数（$范围）{\r
    $ scope.items =A，B，C，D];\r
    $ scope.add =功能（项目）{\r
        $ scope.items.push（项目）;\r
    };\r
\r
}）;\r
＆LT; / SCRIPT＆GT;

\r

\r

\r

I am testing a code with ng-repeat, But with the old version of angular, it's works, but with the latest version it doesn't work !

I explain :

I test this code :

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

When I add severarls items, it works fine ! with the angular.js/1.1.0 version It add a new item

But with the latest version it doesn't work ! We can add one item, but if we add more than one item, it makes this error :

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:d

So my question is how can we add news items in ng-repeat with the news versions ?

Thanks !

解决方案

Please see here https://docs.angularjs.org/error/ngRepeat/dupes

add to your ng-repeat track by $index ie:

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

Demo below:

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

这篇关于NG-重复添加项目（AngularJs 1.2.26）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！