2016-07-13 34 views
1

を繰り返したアイテムを繰り返さないでください:はすでに私は私の応答は以下のようである問題を持っている

[ 
{ 
    "quesListName": "Angular Data Binding Question List", 
    "questions": "data binding between factory and view" 
}, 
{ 
    "quesListName": "Angular Data Binding Question List", 
    "questions": "data binding between factory and view" 
}, 
{ 
    "quesListName": "Angular Filters Question List", 
    "questions": "how to use filter date in directive in angular js ?" 
}, 
{ 
    "quesListName": "Angular Filters Question List", 
    "questions": " directive in angular js ?" 
}, 
{ 
    "quesListName": "Controller Question List", 
    "questions": " filter in angular js ?" 
} 

]

をので、私はここにquesListNameを繰り返す必要がなく、ときに私questListNameが繰り返してはなりません表示して

<ul> 
    <li ng-repeat="qlist in response"> 
      {{qlist}} 
    </li>   
</ul> 

が、ここで私は

のような出力を必要とし、既に を繰り返したものをInfactはすべてQListのを取得イム
Angular Data Binding Question List 
Angular Filters Question List 
Controller Question List 

任意のヘルプは非常にあなたがangular-filterを使用することによって、これを達成することができます

答えて

0

あなたはどのライブラリせずにそれを行うことができますangular.jsスクリプトモジュールで

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script> 

後負荷以下のようになります。

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
     $scope.array = [ 
 
     { 
 
      "quesListName":"Angular Data Binding Question List", 
 
      "questions":"data binding between factory and view" 
 
     }, 
 
     { 
 
      "quesListName":"Angular Data Binding Question List", 
 
      "questions":"data binding between factory and view" 
 
     }, 
 
     { 
 
      "quesListName":"Angular Filters Question List", 
 
      "questions":"how to use filter date in directive in angular js ?" 
 
     }, 
 
     { 
 
      "quesListName":"Angular Filters Question List", 
 
      "questions":" directive in angular js ?" 
 
     }, 
 
     { 
 
      "quesListName":"Controller Question List", 
 
      "questions":" filter in angular js ?" 
 
     } 
 
     ]; 
 

 
     $scope.response = []; 
 
     var unique = {}; 
 
     $scope.array.forEach(function(item) { 
 
     if (!unique[item.quesListName]) { 
 
      $scope.response.push(item); 
 
      unique[item.quesListName] = item; 
 
     } 
 
     }); 
 
    }); 
 
})();
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <span>With duplicates:</span> 
 
    <ul> 
 
    <li ng-repeat="qlist in array" ng-bind="qlist.quesListName"> 
 
    </li> 
 
    </ul> 
 
    <span>Without duplicates:</span> 
 
    <ul> 
 
    <li ng-repeat="qlist in response" ng-bind="qlist.quesListName"> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

注:あなたがES6を使用している場合は、この方法で重複を削除することができます

$scope.response = $scope.array.filter((thing, index, self) => self.findIndex((t) => { 
    return t.quesListName == thing.quesListName; 
}) === index); 
3

を高く評価しています。したがって、angular-filterスクリプトを追加し、モジュールに依存関係を追加する必要があります。 index.htmlには

:HTMLで

angular.module('appName', ['angular.filter']); 

<ul> 
     <li ng-repeat="qlist in response | unique:'quesListName'"> 
      {{qlist.quesListName}} 
    </li> 
<ul> 
関連する問題