AngularJS为什么不想列出重复值的数组项？

Question

当我尝试从数据库中列出某些内容时，我花了很长时间来调试故障所在。原来，如果数组中有重复的值，Angular则拒绝在ng-repeat中使用整个数组。

例如，在这里可以找到一个示例：http://jsfiddle.net/2uyxu7ha/

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”，它就会被显示出来。

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

- Digital Ninja

---

错误信息非常清晰明了：Error: [ngRepeat:dupes] 重复项不允许在重复器中出现。使用“track by”表达式指定唯一键。重复器：item in array2，重复键：string:1 - Mark

重复的内容：https://dev59.com/BmQo5IYBdhLWcg3wI8dV#17246507 - Michael Oryl

Answer 1

对于这种情况，您需要使用track by $index http://jsfiddle.net/2uyxu7ha/1/ 来自文档的解释： https://docs.angularjs.org/error/ngRepeat/dupes

- haimlit

Answer 2

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

请参见更新后的fiddle：

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

现在你不必担心重复的ngRepeat问题了。希望这可以帮到你。

- JayKan

---

你从代码中删除了重复部分，所以你甚至没有解决问题。 - Digital Ninja

Answer 3

在你的 ng-repeat 结尾处需要使用 track by $index

- Oam Psy