Question

Error: ngRepeat:dupes Duplicate Key in Repeater

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

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

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

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

这是我收到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时将数据从一个数组发送到一个不同名称的数组？

1 个答案: