角度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;
    };
});

我越来越:

错误:不允许在转发器中重复.Repeater:在item.comments中发表评论| 范围:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

Answer 1

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

AngularJS不允许在ng-repeat指令中重复.这意味着如果您尝试执行以下操作,则会出现错误.

// 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

Answer 2

对于那些期望JSON并仍然得到相同错误的人,请确保您解析数据:

$scope.customers = JSON.parse(data)

Answer 3

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

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

在上面的代码中,product是一个单独的指令来显示产品.但是我发现当我们从作用域传出数据时$ index会导致问题.因此数据丢失和DOM无法更新.

我通过使用product.id作为ng-repeat中的键来找到解决方案,如下所示:

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

但是当多个产品具有相同的ID时,上面的代码再次失败并抛出以下错误:

angular.js:11706错误:[ngRepeat:dupes]不允许在转发器中重复.使用'track by'表达式指定唯一键.中继器

所以最后我通过制作ng-repeat的动态唯一键来解决问题,如下所示:

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

这解决了我的问题,并希望这将在未来帮助你.

Answer 4

您希望"范围"过滤器做什么？

这是我认为你想要做的工作样本:http://jsfiddle.net/evictor/hz4Ep/

HTML:

<div ng-app="manyminds" ng-controller="MainCtrl">
  <div class="idea item" ng-repeat="item in items" isoatom>    
    Item {{$index}}
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
      Comment {{$index}}
      {{comment}}
    </div>
  </div>
</div>

JS:

angular.module('manyminds', [], function() {}).filter('range', function() {
    return function(input, min, max) {
        var range = [];
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<=max; i++)
            input[i] && range.push(input[i]);
        return range;
    };
});

function MainCtrl($scope)
{
    $scope.items = [
        {
            comments: [
                'comment 0 in item 0',
                'comment 1 in item 0'
            ]
        },
        {
            comments: [
                'comment 0 in item 1',
                'comment 1 in item 1',
                'comment 2 in item 1',
                'comment 3 in item 1'
            ]
        }
    ];
}