如何刪除角度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中的重複鍵值？

回答

相關問題