错误：[ngRepeat：dupes] 这是什么意思？

Question

使用重复指令从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>

我点击了这个错误，在典型的“含糊不清”的angularjs风格中，我得到了以下内容：

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

这是什么意思？“wine”和“wines”不一样，为什么它认为它们是重复的？

- HGB

Answer 1

AngularJS使用键来将DOM节点与项目关联，这是事实。 因此，您可以通过添加"track by $index"来解决问题。

它会像这样：

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

- Y. Tiwari

Answer 2

如果ngRepeat表达式中有重复的键，则会发生重复键错误。禁止重复键，因为AngularJS使用键将DOM节点与元素相关联。

这意味着$scope.wines具有一些重复的值。

您还可以参考此帖子：Angular ng-repeat 错误“不允许在重复器中使用重复项”。

- Sourabh Agrawal

---

谢谢，但我还是不明白。另外，我在HTTP请求的末尾添加了http://www.greatwines.9000.com/wines，出于某种原因它现在可以工作了。我一直遇到这些神秘的错误和AngularJS的修复方法。它并不是非常一致。 - HGB