Angularjs更新指令视图 - 错误：ngRepeat：dupes

Question

index.html ：

<body ng-app="homeApp" ng-controller="homeCtrl">
   <xi-folder-nav></xi-folder-nav>
   <button class="btn btn-default " type="button" xi-search>Search</button>
</body>

nav.html ：

<ol class="breadcrumb" >
<li ng-repeat="n in folderNav" ng-class="{'active' : $last}">
    <a href="#" ng-hide="$last">{{ n }}</a>
    <span ng-show="$last">{{ n }}</span>
</li>
</ol>

service.js ：

angular
    .module('homeApp')
    .service('dataService', dataService);

dataService.$inject = ['$rootScope'];
function dataService($rootScope) {
    var service = {
        folderNav: ['root'],

        addFolderNav: function(nav){
            service.folderNav.push( nav );
            $rootScope.$broadcast( 'folderNav.update' );
        },
    };

    return service;
}

controller.js ：

angular
    .module('homeApp')
    .controller('homeCtrl',homeCtrl);

homeCtrl.$inject = ['$scope','dataService'];
function homeCtrl($scope,dataService) {
    $scope.$on( 'folderNav.update', function( event ) {
        $scope.folderNav = dataService.folderNav;
        $scope.$apply();
    });
    $scope.folderNav = dataService.folderNav;

directive.js ：

angular
    .module('homeApp')
    .directive('xiFolderNav', xiFolderNav);
    .directive('xiSearch', xiSearch);

xiFolderNav.$inject = ['dataService'];
function xiFolderNav(dataService) {
    return{
        restrict: 'E',
        templateUrl: 'js/app/home/nav.html',
    };
}

xiSearch.$inject = ['dataService'];
function xiSearch(dataService) {
    return{
        restrict: 'A',
        link: link
    };

    function link(scope, element, attr) {
        element.bind('click', function(){
            dataService.addFolderNav('gg');
        });

    }
}

我想向nav.html添加一些数据并更新视图。 但是当我第二次点击按钮时，它会显示一些错误。

我已经像大多数人一样将$scope.$apply()到控制器中，但是效果不好！

错误：

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg

Answer 1

此错误是由ng-repeat Duplicate key in Repeater的Duplicate key in Repeater引起的。 请参考这里。

您可以track by $index添加track by $index以避免此错误，或在推送到Repeater之前检查重复项。

Answer 2

您正在数组中添加重复值，您将使用ng-repeat进行迭代。

错误文本解释了所有内容（在链接上），

不允许在转发器中重复。 使用'track by'表达式指定唯一键。 Repeater：n在folderNav中，重复键：string：gg，重复值：gg

click您将向数组添加'gg' ，因此可能会有多个相同元素的条目。

如果这是有意的，并且您希望有多个条目并使ng-repeat工作，则必须明确提及ng-repeat的唯一键。

您可以指定唯一键，

<ol class="breadcrumb" >
<li ng-repeat="n in folderNav track by $index" ng-class="{'active' : $last}">
    <a href="#" ng-hide="$last">{{ n }}</a>
    <span ng-show="$last">{{ n }}</span>
</li>
</ol>

在上面的代码中， $index对于数组中的每个元素都是唯一的，它是数组中元素的索引号。

Angularjs更新指令视图 - 错误：ngRepeat：dupes

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-04-19 03:29:23

解决方案2
0 2017-04-19 03:33:22

Angularjs更新指令视图 - 错误：ngRepeat：dupes

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-04-19 03:29:23

解决方案2 0 2017-04-19 03:33:22

解决方案1
0 已采纳 2017-04-19 03:29:23

解决方案2
0 2017-04-19 03:33:22