javascript - Angular - 错误 : [ngRepeat:dupes] when using $http to get data

Question

您好，我刚开始使用 AngularJs，我在使用 $http 获取数据时遇到问题并且 $scope.productInfos = data 返回错误:[ngRepeat:dupes]，下面是我的代码:

$scope.processForm = function(formData) {

        $http({

          method  : 'POST',

          url: '/quote-tool/productinfoforproductids/', // using php to generate json i.e [{id:1},{id:2}]

          data: $('.js-checkedCompareForm').serialize(),

          headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)

         }).success(function(result) {

            $scope.productInfos = result;

         }).error(function(err) {

             return err; 

        });
    };

在 View 中:

<div class="js-productInfo" ng-repeat="productInfo in productInfos">
    {{ productInfo.id }}
</div>

我不确定 Angular 是否将其视为重复的副本？我一直在尝试使用 $index 跟踪，但仍然无法正常工作，它在 View 中显示了过多的重复。

Answer 1

当您在 ngRepeat 表达式中有重复的键时会发生此类错误。可能使用 track by $index 将解决您的问题。查看此链接:https://docs.angularjs.org/error/ngRepeat/dupes

<div class="js-productInfo" ng-repeat="productInfo in productInfos track by $index">
    {{ productInfo.id }}
</div> 

如果您仍然遇到错误，请提供 fiddle/plunker。