如果值重复，为什么 AngularJS 不想列出数组项？

Question

当我试图从数据库中列出一些内容时，我花了很长时间来调试错误所在。事实证明，如果数组中有重复的值，Angular 将完全拒绝在 ng-repeat 中使用该数组。

Javascript:

var app = angular.module("Module", []);
app.controller("Controller", function($scope){
    $scope.array1 = ["1", "2", "3", "4"];
    $scope.array2 = ["1", "1", "3", "4"];
});

HTML:

<div ng-app="Module">
    <div ng-controller="Controller as ctrl">
        <ul>
            <li ng-repeat="item in array1">{{item}}</li>
        </ul>
        <ul>
            <li ng-repeat="item in array2">{{item}}</li>
        </ul>
    </div>
</div>

您会注意到，第二个数组中只有一个值重复，因此不会显示整个列表。如果你只是把第二个值改成“2”，它就会显示出来。

我不想要这种行为，因为即使数据库中有一些重复值，我仍然希望在前端看到它们。为什么会发生这种情况，我该如何解决？

Answer 1

对于这种情况，您需要 track by $index

http://jsfiddle.net/2uyxu7ha/1/

来自文档的解释：

https://docs.angularjs.org/error/ngRepeat/dupes

Answer 2

您需要在 ng-repeat 的末尾使用 track by $index

Answer 3

由于您使用的是 ControllerAs 语法，因此您可以使用它在您的控制器中引用 $scope，而在您的 HTML 中，您只需确保引用正确的数组。

查看更新 fiddle：

[http://jsfiddle.net/jaykan24/2uyxu7ha/2/][1]

现在您不必担心重复的 ngRepeat 问题。希望这可以帮助

如果值重复，为什么 AngularJS 不想列出数组项？

Why doesn't AngularJS want to list array items if a value repeats?

javascript

angularjs

ng-repeat

angularjs-ng-repeat