Angular ng-repeat錯誤“不允許在轉發器中重複。”

本文翻譯自:Angular ng-repeat Error “Duplicates in a repeater are not allowed.”

I am defining a custom filter like so: 我正在定義一個自定義過濾器,如下所示:

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

As you can see the ng-repeat where the filter is being used is nested within another ng-repeat 如您所見,使用過濾器的ng-repeat嵌套在另一個ng-repeat中

The filter is defined like this: 過濾器的定義如下:

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

I'm getting: 我越來越:

Error: Duplicates in a repeater are not allowed. 錯誤:不允許在轉發器中重複。 Repeater: comment in item.comments | 中繼器:在item.comments中發表評論| range:1:2 ngRepeatAction@ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an 範圍:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an


#1樓

參考:https://stackoom.com/question/16NVW/Angular-ng-repeat錯誤-不允許在轉發器中重複


#2樓

What do you intend your "range" filter to do? 您打算如何使用“範圍”過濾器?

Here's a working sample of what I think you're trying to do: http://jsfiddle.net/evictor/hz4Ep/ 這是我認爲您要嘗試執行的工作示例: http : //jsfiddle.net/evictor/hz4Ep/

HTML: 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: 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'
            ]
        }
    ];
}

#3樓

The solution is actually described here: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/ 該解決方案實際上在這裏進行了描述: http : //www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS does not allow duplicates in a ng-repeat directive. AngularJS不允許在ng-repeat指令中重複。 This means if you are trying to do the following, you will get an error. 這意味着,如果您嘗試執行以下操作,將會收到錯誤消息。

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

However, changing the above code slightly to define an index to determine uniqueness as below will get it working again. 但是,稍微更改上面的代碼以定義一個索引來確定唯一性,如下所示,它將使它再次工作。

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

Official docs are here: https://docs.angularjs.org/error/ngRepeat/dupes 官方文檔在這裏: https : //docs.angularjs.org/error/ngRepeat/dupes


#4樓

對於那些希望使用JSON並仍然遇到相同錯誤的人,請確保您解析數據:

$scope.customers = JSON.parse(data)

#5樓

If by chance this error happens when working with SharePoint 2010: Rename your .json file extensions and be sure to update your restService path. 如果偶然在使用SharePoint 2010時發生此錯誤,請執行以下操作:重命名.json文件擴展名,並確保更新restService路徑。 No additional "track by $index" was required. 不需要其他“ $ index跟蹤”。

Luckily I was forwarded this link to this rationale: 幸運的是,我將此鏈接轉發給了以下理由:

.json becomes an important file type in SP2010. .json成爲SP2010中重要的文件類型。 SP2010 includes certains webservice endpoints. SP2010包括某些Web服務終結點。 The location of these files is 14hive\\isapi folder. 這些文件的位置是14hive \\ isapi文件夾。 The extension of these files are .json. 這些文件的擴展名是.json。 That is the reason it gives such a error. 這就是它給出這樣一個錯誤的原因。

"cares only that the contents of a json file is json - not its file extension" “只關心json文件的內容是json-而不是文件擴展名”

Once the file extensions are changed, should be all set. 更改文件擴展名後,應全部設置。


#6樓

My JSON response was like this: 我的JSON響應是這樣的:

{"items": 
  &nbsp;[
    &nbsp;&nbsp;{
      "index": 1,
      "name": "Samantha",
      "rarity": "Scarborough",
      "email": "[email protected]"
    },
    &nbsp;&nbsp;{
      "index": 2,
      "name": "Amanda",
      "rarity": "Vick",
      "email": "[email protected]"
    }]
}

So, I used ng-repeat = "item in variables.items" to display it. 因此,我使用了ng-repeat = "item in variables.items"來顯示它。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章