フィルター動的フィルタによって、配列内のオブジェクトAngularJS

Question

が今の私のデータ構造が

product = [{att1:'2',att2:'red',att3:'gold'}, 
    {att1:'1',att2:'blue',att3:'wood'}, 
    {att1:'2',att2:'green',att3:'plastic'}, 
    {att1:'1',att2:'red',att3:'plastic'}] 

のようなもので、私は、Webページ上のフィルターを持っている、それは3つの部分があります。ユーザーはすべての部品にオプションを選択する必要はありません。

• フィルタatt1の場合、「1」と「2」の2つのオプションがあります。
• フィルターatt2 "赤" "青"と "緑"の2つのオプションがあります。
• フィルターatt3には、「金」、「木」、「プラスチック」の3つのオプションがあります。

私は選択されたオプションを得ることができます。たとえば： {att1:['2'],att3:['gold','plastic']}または{att1:['1']}

私の質問は、私は、製品データをフィルタリングするproduct.filterを使うのですか、ですか？ ありがとう！

Answer 1

あなたが使いやすいカスタムフィルタ機能を使用することができ、私はatt1を使用していますが、すべてのフィールドに展開することができます

var app = angular.module("MyApp", []); 
 

 
app.controller("MyCtrl", function($scope) { 
 
    $scope.products = [{att1:'2',att2:'red',att3:'gold'}, 
 
    {att1:'1',att2:'blue',att3:'wood'}, 
 
    {att1:'2',att2:'green',att3:'plastic'}, 
 
    {att1:'1',att2:'red',att3:'plastic'}]; 
 

 
    $scope.filterFunction = function(element) { 
 
    return element.att1.match(/^Ma/) ? true : false; 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <form class="form-inline"> 
 
     <input ng-model="query" type="text" 
 
     placeholder="Filter by" autofocus> 
 
    </form> 
 
    <ul ng-repeat="product in products | filter:query"> 
 
     <li>{{product}}</li> 
 
    </ul> 
 
    
 
    
 
    <ul ng-repeat="product in products | filter:filterFunction"> 
 
     <li>{{product}}</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

私は、このために特定のロジックを出しきっ1つは、3つのネストされたループを使用して超大ではありませんが、それは仕事をしません。私はあなたには、いくつかのマップか何かを使って、これをさらに最適化することができると確信していますが、私はちょうどそれが強引なアプローチによって行わ取得して行きました:)

angular.module('myApp',[]) 
 
    .service('ProductService', function(){ 
 
    return { 
 
     products:[ 
 
     {att1:'2',att2:'red',att3:'gold'}, 
 
     {att1:'1',att2:'blue',att3:'wood'}, 
 
     {att1:'2',att2:'green',att3:'plastic'}, 
 
     {att1:'1',att2:'red',att3:'plastic'} 
 
     ] 
 
    } 
 
    }) 
 
    
 
    .controller('TestCtrl', function(ProductService){ 
 
    this.ProductService = ProductService; 
 
    this.filterObject1 = {att1:['2'],att3:['gold','plastic']}; 
 
    this.filterObject2 = {att1:['1']}; 
 
    }) 
 
    
 
    .filter('productFilter', function(){ 
 
    return function(input,filterObj){ 
 
     if(!filterObj){ 
 
     return input; 
 
     } 
 
     var newArray = []; 
 
     var filterKeys = Object.keys(filterObj); 
 
     
 
     for(var i=0;i<input.length;i++){ 
 
     var curElement = input[i]; 
 
     innerLoops: 
 
     for(var j=0;j<filterKeys.length;j++){ 
 
      var curKey= filterKeys[j]; 
 
      for(var k=0;k<filterObj[curKey].length;k++){ 
 
      var curFilterValue = filterObj[curKey][k]; 
 
      if(curElement[curKey].match(curFilterValue)){ 
 
       //We found a match keep this element and move on to checking the next one by breaking out of the inner loops that are checking particular keys/values 
 
       newArray.push(curElement); 
 
       break innerLoops; 
 
      } 
 
      } 
 
     } 
 
     } 
 
     return newArray; 
 
    }; 
 
    }) 
 
    ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script> 
 

 
<div ng-app="myApp" ng-controller="TestCtrl as ctrl"> 
 
Unfiltered 
 
    <div ng-repeat="product in ctrl.ProductService.products|productFilter"> 
 
    {{product}} 
 
    </div> 
 
    <hr/> 
 
    <strong>Filtered with: {{ctrl.filterObject1}}</strong> 
 
    <div ng-repeat="product in ctrl.ProductService.products|productFilter:ctrl.filterObject1"> 
 
    {{product}} 
 
    </div> 
 
    <hr/> 
 
    <strong>Filtered with {{ctrl.filterObject2}}</strong> 
 
    <div ng-repeat="product in ctrl.ProductService.products|productFilter:ctrl.filterObject2"> 
 
    {{product}} 
 
    </div> 
 
</div>