web-dev-qa-db-fra.com

Angular ng-repeat Erreur "Les doublons dans un répéteur ne sont pas autorisés."

Je définis un filtre personnalisé comme ceci:

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

Comme vous pouvez le voir, le filtre ng-repeat où le filtre est utilisé est imbriqué dans un autre fichier ng-repeat

Le filtre est défini comme ceci:

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

Je suis en train:

Erreur: les doublons dans un répéteur ne sont pas autorisés. Repeater: commenter dans item.comments | plage: 1: 2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

angularjsng-repeat
461
Dine

La solution est en fait décrite ici: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS n'autorise pas les doublons dans une directive ng-repeat. Cela signifie que si vous essayez de faire ce qui suit, vous obtiendrez une erreur.

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

Cependant, modifier légèrement le code ci-dessus pour définir un index afin de déterminer l'unicité, comme indiqué ci-dessous, le fera fonctionner à nouveau.

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

Les documents officiels sont ici: https://docs.angularjs.org/error/ngRepeat/dupes

941
Webnet

Pour ceux qui attendent JSON et ont toujours la même erreur, assurez-vous d’analyser vos données:

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

J'avais un problème dans mon projet où j'utilisais ng-repeat track by $ index mais les produits ne reflétaient pas lorsque les données proviennent de la base de données. Mon code est comme ci-dessous:

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

Dans le code ci-dessus, product est une directive distincte permettant d'afficher le produit.Mais j'ai appris que $ index était la cause du problème lorsque nous transmettions des données à partir de la portée. Donc, les pertes de données et les DOM ne peuvent pas être mis à jour.

J'ai trouvé la solution en utilisant product.id comme clé dans ng-repeat comme ci-dessous:

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

Mais le code ci-dessus échoue à nouveau et renvoie l'erreur ci-dessous lorsque plusieurs produits ont le même identifiant:

angular.js: 11706 Erreur: [ngRepeat: dupes] Les doublons dans un répéteur ne sont pas autorisés. Utilisez l'expression 'piste par' pour spécifier des clés uniques. Répéteur

Donc, finalement, j'ai résolu le problème en rendant la clé unique dynamique de ng-repeat comme ci-dessous:

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

Cela a résolu mon problème et j'espère que cela vous aidera à l'avenir.

11
Mahima Agrawal

Que voulez-vous que votre filtre "range" fasse?

Voici un exemple de travail de ce que je pense que vous essayez de faire: 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

Si par hasard cette erreur se produit lorsque vous utilisez SharePoint 2010: renommez vos extensions de fichier .json et veillez à mettre à jour votre chemin restService. Aucun "suivi par $ index" supplémentaire n'était requis.

Heureusement, on m'a transmis ce lien à ce raisonnement:

.json devient un type de fichier important dans SP2010. SP2010 inclut certains points de terminaison de services Web. L’emplacement de ces fichiers est le dossier 14Hive\isapi. Les extensions de ces fichiers sont .json. C'est la raison pour laquelle cela donne une telle erreur.

"se soucie seulement que le contenu d'un fichier json est json - pas son extension de fichier"

Une fois que les extensions de fichier ont été modifiées, vous devez tout définir.

1
CR Rollyson

Les doublons dans un répéteur ne sont pas autorisés. Utilisez l'expression 'track by' pour spécifier des clés uniques.

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

Exemple

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

Si vous appelez ng-repeat dans une balise <ul>, vous pourrez peut-être autoriser les doublons. Voir ce lien pour référence. Voir Todo2.html

0
TheUnKnown

Juste au cas où cela arriverait à quelqu'un d'autre, je documente cela ici, j'obtenais cette erreur parce que j'avais paramétré par erreur le modèle ng de la même manière que le tableau 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>

Au lieu de:

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

J'ai vérifié le tableau et je n'ai pas eu de doublons, il suffit de vérifier vos variables.

0
Miguel Suarez