2017-09-02 5 views
0

配列のjson値にng-repeatを使用しています。しかし、私はUI(HTML)から重複した値を削除したい。 車の値が繰り返されているので、重複したキー値を削除します。それは一度来なければならない。あなたが使用することができます角度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>

答えて

0

は、単に

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>

+0

私はこれを試しています。しかしそれは私にfsusを未定義にしています。 –

+0

あなたは$ scope.res.fsusを置く必要があります。私がputtedデモ – Sajeetharan

+0

を確認してください。しかし、私は知らない。なぜそれは来ている。 –

0

、オブジェクトのコレクションから同じオブジェクトを削除する_.isEqualとともに_.uniqWithをlodash。 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を使用している場合、このもののためにロダッシュを貼っておくべきです。あなたが任意の外部ライブラリを使用する必要はありません

+0

しかし、あなたのコードでは、繰り返しの要素を削除するためにangular.forEachを使用しています。ロードスマッシュを使用していません。あなただけがインポートしました。 –

+0

@VSH、上記のjsコードの2行目を参照してください。 '$ scope.res.fsus = _.uniqWith($ scope.res.fsus、_.isEqual);' – RaghavGarg

+0

@VSH、私の更新されたコードを見てください、私はそれをトリミングしています。 – RaghavGarg

関連する問題