如何删除角度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>
您不必使用任何外部库，只需使用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>
可以使用，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也。
但在你的代码。你没有使用loadash。只有你进口。 –
@VSH，请参阅上面的js代码的第二行，'$ scope.res.fsus = _.uniqWith（$ scope.res.fsus，_.isEqual）;' – RaghavGarg
@VSH，请参阅我的更新代码，我修剪了它。 – RaghavGarg
我正在尝试这一个。但它给我fsus未定义。 –
你需要把$ scope.res.fsus，检查演示 – Sajeetharan
我putting。但我不知道。它为什么要来。 –