为什么我在将数据从一个数组发送到另一个命名的数组时得到 ngRepeat:dupes？

Question

Error: ngRepeat:dupes Duplicate Key in Repeater

http://plnkr.co/edit/hZtIXkPM7dhpf4P7rd6W?p=preview

我有一个数组，其中 ng-repeats 页面上的标签列表。接下来我有一个 ng-click 将标签数据发送到另一个控制器的范围内，它的工作是在另一个列表中显示那些选定的标签。

在上面的 plnkr 中查看代码更容易，但基础知识是：

第一个标签数组在cnt控制器中
当您点击标签时，它会存储在 TagDetailsFactory 服务中
然后我向视图控制器广播一个事件，然后调用 TagDetailsFactory 中的 getTagDetails 函数来检索保存的标签并将它们存储到视图控制器中的 viewTags 数组中.

这是我收到 ngDupes 错误的地方:(

然而，cnt中的数组被命名为$scope.tags = []; view 中的数组是 $scope.viewTags = [];

// Code goes here

angular.module('app', [])

.directive('tagDetails', function() {
  return {
    restrict: "E",
    link: function($scope, el, attrs) {
      // console.debug($scope, attrs);
    },
    scope:{
        tag:'=ngModel'
    },
    template: '<div ng-show="tag.showDetails">{{tag.details}}</div>'
  };
})

.controller('cnt', ['$scope',
                    '$rootScope',
                    'TagDetailsFactory',
                    function($scope,
                             $rootScope,
                             TagDetailsFactory) {
  $scope.tags = [];

  for(var i = 0; i < 100; i++) {
    $scope.tags.push(
      { name: 'Foo Bar ' + i, details: 'Details' + i }
    );
  }

  $scope.showTagDetails = function(t) {
    t.showDetails = true;
  }

  $scope.leaveTag = function(t) {
    t.showDetails = false;
  }

  $scope.sendTag = function(t) {
    TagDetailsFactory.saveTagDetails(t);
    $rootScope.$broadcast('updateView');
  }

}])

.factory('TagDetailsFactory', function() {

      var savedTags = [];

      var saveTagDetails = function(tag) {
        savedTags.push(tag);
      }

      var getTagDetails = function() {
        return savedTags;
      }

      return {
          saveTagDetails : saveTagDetails,
          getTagDetails  : getTagDetails
      };
})

.controller('view', ['$scope',
                     '$rootScope',
                     'TagDetailsFactory',
                     function($scope,
                              $rootScope,
                              TagDetailsFactory) {

  $scope.viewTags = [];

  $scope.$on('updateView', function() {
    console.log('updateView');
    var tags = TagDetailsFactory.getTagDetails();
    console.log(tags);
    $scope.viewTags.push(tags);
  });

  // $scope.showTagDetails = function(t) {
  //   t.showDetails = true;
  // }

  // $scope.leaveTag = function(t) {
  //   t.showDetails = false;
  // }

}]);

Answer 1

ng-repeat 不允许重复项（否则它如何跟踪它们，例如，如果您想更新某些内容？）。 “ 为了处理这个问题，您可以将 track by $index 添加到您的 ng-repeat 值中：

ng-repeat="data in dataset track by $index"

您也可以让它通过数据中的其他值进行跟踪，但它必须是唯一的。

Your Plunker

为什么我在将数据从一个数组发送到另一个命名的数组时得到 ngRepeat:dupes？

Why am I getting ngRepeat:dupes when sending data from an Array into a differently named Array?

javascript

angularjs

angularjs-service

angularjs-ng-repeat