Question

我尝试使用＆＃39; ng-repeat＆＃39;进行简单的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

然而，当我更改＆＃39;数字时，像这样的数组

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

剩下的就是它，它不起作用。

我所做的唯一改变是我已经在＆＃39;数字＆＃39;中添加了一个项目。阵列＆＃39; 2＆＃39;。我想出的问题是，只要在数组中重复某个项目（＆＃39; 2＆＃39;在这种情况下），就会出现问题。

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

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元素之间保持一对一的映射。

如果您确实需要重复重复项目，则可以使用表达式跟踪替换默认跟踪行为

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

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

Answer 2

根据Angular Docs不允许重复。您需要使用＆＃39;跟踪＆＃39;表达式以指定唯一键。

创建此Plnkr供您参考

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

Answer 3

您还需要使用track by $index来迭代重复输入。

Answer 4

你可以这样尝试

<div ng-repeat="value in [4, 4] track by $index">{{value}}</div>

在AngularJS中循环不起作用

4 个答案: