“角度ng重复错误”不允许在中继器中重复

Question

我定义了一个自定义过滤器，如下所示：

<div class="idea item" ng-repeat="item in items" isoatom>    
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

正如您所看到的，使用过滤器的ng repeat嵌套在另一个ng repeat中

过滤器的定义如下：

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

我得到：

错误：中继器中不允许重复。复读机：评论在item.comments|范围：1:2ngRepeatAction@https：//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

Answer 1

我在我的项目中遇到了一个问题，我使用了ng repeat track by$index，但当数据来自数据库时，产品没有得到反映。我的代码如下：

<div ng-repeat="product in productList.productList track by $index">
  <product info="product"></product>
 </div>

在上述代码中，产品是显示产品的单独指令。但是我开始知道，当我们从范围传递数据时，$index会导致问题。因此数据丢失和DOM不能被更新。

我通过使用产品找到了解决方案。id作为ng中的键重复如下：

<div ng-repeat="product in productList.productList track by product.id">
  <product info="product"></product>
 </div>

但当多个产品具有相同id时，上述代码再次失败并抛出以下错误：

有棱角的js:11706错误：[ngRepeat:dupes]中继器中不允许重复。使用“跟踪依据”表达式指定唯一关键点。中继器

所以最后我通过制作ng repeat的动态唯一键解决了这个问题，如下所示：

<div ng-repeat="product in productList.productList track by (product.id + $index)">
  <product info="product"></product>
 </div>

这解决了我的问题，希望这将有助于你在未来。

Answer 2

对于那些期望使用JSON但仍然收到相同错误的用户，请确保解析数据：

$scope.customers = JSON.parse(data)

Answer 3

这里实际上描述了解决方案：http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS不允许在ng重复指令中重复。这意味着如果您试图执行以下操作，您将获得一个错误。

// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">

然而，稍微改变上面的代码来定义一个索引来确定唯一性，如下所示，这将使它再次工作。

// This will work
<div ng-repeat="row in [1,1,1] track by $index">

官方文件如下：https://docs.angularjs.org/error/ngRepeat/dupes