web-dev-qa-db-ja.com

Angular ng-repeatエラー "リピーター内の重複は許可されていません。"

カスタムフィルタを次のように定義しています。

<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：2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

angularjsng-repeat
457
Dine

解決策は実際にここに記述されている： 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

928
Webnet

JSONを期待し、それでも同じエラーが発生する人のために、必ずデータを解析してください。

$scope.customers = JSON.parse(data)
43
usefulBee

私は自分のプロジェクトで$ indexでng-repeatトラックを使用していましたが、データベースからデータが来ると製品が反映されないという問題を抱えていました。私のコードは以下の通りです：

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

上記のコードでは、productはproductを表示するための別のディレクティブです。ただし、スコープからデータを渡すと$ indexが問題を引き起こすことがわかりました。だからデータの損失とDOMを更新することはできません。

以下のようにng-repeatのキーとしてproduct.idを使用して解決策を見つけました。

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

これで私の問題は解決したし、これが将来あなたに役立つことを願っている。

11
Mahima Agrawal

あなたはあなたの "range"フィルタに何をするつもりですか？

これが私がしていることの実用的なサンプルです 思う あなたがやろうとしている： 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'
            ]
        }
    ];
}
5
Ezekiel Victor

SharePoint 2010での作業中に偶然にこのエラーが発生した場合：.jsonファイル拡張子を変更し、必ずrestServiceパスを更新してください。追加の "track by $ index"は必要ありませんでした。

幸いなことに、私はこの link をこの論理的根拠に転送した。

SP2010では、.jsonが重要なファイルタイプになりました。 SP2010には特定のWebサービスエンドポイントが含まれています。これらのファイルの場所は14Hive\isapiフォルダーです。これらのファイルの拡張子は.jsonです。それがそのようなエラーを与える理由です。

「jsonファイルの内容がjsonであり、ファイル拡張子ではないことだけを気にする」

ファイル拡張子が変更されたら、すべて設定する必要があります。

1
CR Rollyson

リピーター内での複製は許可されていません。一意のキーを指定するには、 'track by'式を使用してください。

Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", ['$scope', function ($scope)
        { 
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" }, 
                { firstName: "F3", lastName: "L3" }, 
                { firstName: "F4", lastName: "L4" }, 
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind) 
            { 
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.Push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>
0
Yogesh Sharma

<ul>タグ内でng-repeatを呼び出すと、重複を許可できる場合があります。参照用にこのリンクを参照してください。 Todo2.htmlを参照

0
TheUnKnown

万が一これが他の誰かに起こった場合、私はここでこれを文書化しています、私は誤ってng-modelをng-repeat配列と同じに設定したのでこのエラーを得ていました：

 <select ng-model="list_views">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

の代わりに：

<select ng-model="config.list_view">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

配列をチェックしましたが、何も重複していませんでした。変数を二重チェックしてください。

0
Miguel Suarez