Ошибка: [ngRepeat: dupes] Что это значит?

Повторите директиву, выводя записи вина из api. У меня есть заводская функция для обслуживания винного API, который затем открывается в моем контроллере

app.factory("Wine", function ($http){
     var factory = {};

     //getWines 
     factory.getWines = function(){ 
      return $http.get("http://www.greatwines.9000.com")
     }

}

контроллер:

    app.controller("winesCtrl", function($scope, $http, Wine){
        Wine.getWines()
         .success(function(wines){
           $scope.wines = wines;
        })
        .error(function(){
             alert("Error!");
         });
    });

VIEW:

<h2>Wine list</h2>
    <div class="row margin-top-20 wine-container" ng-repeat="wine in wines">
        <div class="col-sm-3">
            <img src="{{wine.picture}}" class="img-responsive" />
        </div>
        <div class="col-sm-9">
            <div class="margin-top-20">
                <span class="bold">Name: </span><span>{{wine.name}}</span>
            </div>
            <div>
                <span class="bold">Year: </span><span>{{wine.year}}</span>
            </div>
            <div>
                <span class="bold">Grapes: </span><span>{{wine.grapes}}</span>
            </div>
            <div>
                <span class="bold">Country: </span><span>{{wine.country}}</span>
            </div>
            <div>
                <span class="bold">Region: </span><span>{{wine.region}}</span>
            </div>
            <div>
                <span class="bold">Price: </span><span>{{wine.price}}</span>
            </div>
            <div>
                <span class="bold">{{wine.description}}</span>
            </div>
            <div class="margin-top-20">
                <a href="#/wines/{{wine.id}}" class="btn btn-default">Edit Wine</a>
            </div>
        </div>
    </div>

Я нажал на эту ошибку и в типичном "туманном" угловом режиме я получаю следующее:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: wine in wines, Duplicate key: string:e, Duplicate value: e

Что это значит? вино - это не то же самое, что "вина", так почему он думает, что это дубликат?

Ответ 1

Происходит, если в выражении ngRepeat есть повторяющиеся ключи. Дублирующие ключи запрещены, поскольку AngularJS использует ключи для связывания узлов DOM с элементами.

Это означает, что $ scope.wines имеют несколько значений, которые являются дублирующими.

Вы также можете сослаться на это сообщение: Ошибка углового ng-repeat "Дубликаты в ретрансляторе не разрешены".

Ответ 2

Это правда, что AngularJS использует ключи для связи DOM-узлов с элементами. Итак, вы можете решить, добавив "track by $index".

Это будет выглядеть так

ng-repeat="wine in wines track by $index"