如何删除角度js ng-repeat中的重复键值？

我正在使用ng-repeat数组json值。但我想从UI（HTML）中删除重复的值。赞Car值重复，所以我想删除重复的键值。它应该来一次。如何删除角度js ng-repeat中的重复键值？

var app = angular.module('testApp',[]); 
 
app.controller('testCtrl',function($scope){ 
 
    $scope.res ={}; 
 
    $scope.res.fsus = [ 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "var" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "ban" 
 
     } 
 
     } 
 
    } 
 
    } 
 
]; 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="testApp" ng-controller="testCtrl"> 
 
<li ng-repeat="test in res.fsus track by $index"> 
 
    <span class="step"> {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}} 
 
    </span> 
 
</li> 
 
</body>

来源

2017-09-02 V SH

您不必使用任何外部库，只需使用angular.forEach删除重复的元素，

angular.forEach($scope.res.fsus,function(key,value){ 
    if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){ $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode); 
    }; 
});

DEMO

var app = angular.module('testApp',[]); 
 
app.controller('testCtrl',function($scope){ 
 
    $scope.res ={}; 
 
    $scope.res.fsus = [ 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "var" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "car" 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    { 
 
    "statusMessageType": { 
 
     "MasterConsignment": { 
 
     "ReportedStatus": { 
 
      "ReasonCode": "ban" 
 
     } 
 
     } 
 
    } 
 
    } 
 
]; 
 

 
$scope.opts = []; 
 
angular.forEach($scope.res.fsus,function(key,value){ 
 
    if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){ $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode); 
 
    }; 
 
}); 
 
    
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> 
 
<body ng-app="testApp" ng-controller="testCtrl"> 
 
<li ng-repeat="test in opts"> 
 
    <span class="step"> {{test}} 
 
    </span> 
 
</li> 
 
</body>

来源

2017-09-02 12:20:06 Sajeetharan

我正在尝试这一个。但它给我fsus未定义。 –

你需要把$ scope.res.fsus，检查演示 – Sajeetharan

我putting。但我不知道。它为什么要来。 –

可以使用，lodash _.uniqWith与_.isEqual一起从对象的集合中删除相等的对象。阅读更多关于lodash uniqWith。

var app = angular.module('testApp',[]); 
 
app.controller('testCtrl',function($scope){ 
 
    $scope.res ={}; 
 
    fake = ['var', 'car', 'car', 'ban', 'car'] 
 
    $scope.res.fsus = fake.map(val => { 
 
    return { 
 
     "statusMessageType": { 
 
     "MasterConsignment": { 
 
      "ReportedStatus": { 
 
      "ReasonCode": val 
 
      } 
 
     } 
 
     } 
 
    }; 
 
    }) 
 
    $scope.res.fsus = _.uniqWith($scope.res.fsus, _.isEqual); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> 
 
<body ng-app="testApp" ng-controller="testCtrl"> 
 
    <li ng-repeat="test in res.fsus track by $index"> 
 
    <span class="step"> 
 
     {{ test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode }} 
 
    </span> 
 
    </li> 
 
</body>

注：也许@Sajeetharan是正确的，使用本机代码，而不是外部的lib代码，但如果你已经在你的项目中使用其他lodash（像我一样），你应该坚持与这一个lodash也。

来源

2017-09-02 12:00:30 RaghavGarg

但在你的代码。你没有使用loadash。只有你进口。 –

@VSH，请参阅上面的js代码的第二行，'$ scope.res.fsus = _.uniqWith（$ scope.res.fsus，_.isEqual）;' – RaghavGarg

@VSH，请参阅我的更新代码，我修剪了它。 – RaghavGarg

如何删除角度js ng-repeat中的重复键值？

回答

相关问题