angularjs - 在AngularJS中循环不起作用

Question

我正在尝试使用 'ng-repeat' 指令进行简单的 AngularJS 循环，如下所示:

<div ng-app="" ng-init="numbers=[1,3,5,2]">
   <ul>
       <li ng-repeat="item in numbers">{{ item }}</li>
   </ul>
</div>

这样的结果如下，很完美

• 1
• 3
• 5
• 2

但是，当我像这样更改“数字”数组时

<div ng-app="" ng-init="numbers=[1,3,5,2,2]">

其余部分保持原样，这是行不通的。

我所做的唯一更改是在“数字”数组“2”中添加了一项。我发现的问题是，只要在数组中重复某个项目(在这种情况下为 '2')，就会出现问题。

我注意到的控制台日志如下所示

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=item%20in%20numbers&p1=number%3A2&p2=2
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:232:494
    at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:53)
    at l.$get.l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:123:138)
    at l.$get.l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:479
    at Object.e [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:36:315)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:17:400)
    at tc (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:18:179)

另外，如果数组是字符串类型的值，同样的问题也会存在。

例如，<div ng-app="" ng-init="names=['Bishnu', 'Sagar', 'John', 'Bishnu']">在这种情况下，我也面临同样的问题。

AngularJS 的这种行为很奇怪。

有谁知道原因，如何解决？

Answer 1

试试这个...

ngRepeat 指令为集合中的每个项目实例化一次模板。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项，$index 设置为项索引或键。

ngRepeat 对 DOM 进行相应的更改

添加项目时，模板的新实例会添加到 DOM。当一个项目被移除时，它的模板实例就会从 DOM 中移除。当项目重新排序时，它们各自的模板在 DOM 中重新排序。默认情况下，ngRepeat 不允许数组中有重复项。这是因为当存在重复项时，无法在集合项和 DOM 元素之间保持一对一的映射关系。

如果您确实需要重复重复的项目，您可以使用 track by expression 替换默认的跟踪行为

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

引用:https://docs.angularjs.org/api/ng/directive/ngRepeat