在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
• 五
• 2

但是,当我像这样更改'numbers'数组时

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

作为其余部分,它不起作用.

我所做的唯一改变是我在'numbers'数组'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表达式替换自己的默认跟踪行为

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

参考:https://docs.angularjs.org/api/ng/directive/ngRepeat