필터 동적 필터에 의해 배열의 객체 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'}] 

처럼 내가 웹 페이지에 필터를 가지고, 그것은 세 부분으로 구성됩니다. 사용자는 모든 부품에 대한 옵션을 선택할 필요가 없습니다.

• 필터 att1에는 "1"과 "2"의 두 가지 옵션이 있습니다.
• 필터 att2 "빨간색" "파란색"및 "녹색"의 두 가지 옵션이 있습니다.
• 필터 att3 "금색", "목재"및 "플라스틱"의 세 가지 옵션이 있습니다.

나는 옵션을 선택할 수 있습니다. {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

내가 이것에 대한 특정 로직을 부딪 혔어요 하나, 세 개의 중첩 루프를 사용하면 훌륭한 것은 아니지만 그 일을합니다. 나는 당신이 어떤지도 또는 무언가를 사용하여이 작업을 더욱 최적화 할 수 있습니다 확신하지만, 난 그냥

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>