2015-07-10 76 views
0

我希望能夠根據字符串數組過濾整個對象。目前,默認過濾器將基於單個字符串值搜索整個對象,但不會與字符串數組一起搜索。基於字符串數組的角度過濾對象

current jsfiddle

<div ng-controller="myController"> 
    <div> 
     <ul determine-filtering> 
      <li get-filter-tag active-state="false" tag="{{button}}" 
      ng-repeat="button in buttons"> 
       {{button}} 
      </li> 
     </ul> 

     <hr/> 
     <ul> 
      <li ng-repeat="item in content | filter:filterArray"> 
       {{item.data.headline}} 
      </li> 
     </ul>  

    </div> 
</div> 

app.js

var testapp = angular.module('testapp', []) 


.filter('inArray', function($filter){ 
    return function(list, arrayFilter){ 
     if(arrayFilter.length > 0){ 
      console.log(arrayFilter); 
      return $filter("filter")(list, function(listItem){ 
       return arrayFilter.indexOf(listItem) != -1; 
      }); 
     }else{ 
      return $filter("filter")(list, function(listItem){ 
       return arrayFilter.indexOf(listItem) == -1; 
      }); 
     } 
    }; 
}) 


.directive('getFilterTag', function() { 
     return { 
      link: function postLink(scope, element, attrs) { 
       element.on('click', function(){ 
        var tag = attrs.tag; 
        var filterArray = scope.filterArray; 
        if(filterArray.indexOf(tag) === -1){ 
         scope.filterArray.push(tag); 
        }else{ 
         filterArray.splice(filterArray.indexOf(tag), 1); 
        } 
        scope.$apply(); 

       }); 
      } 
     }; 
    }) 

.directive('activeState', function() { 
     return { 
      link: function (scope, element, attrs) { 
       element.on('click', function(){ 
        attrs.activeState = !attrs.activeState; 
        if(!attrs.activeState){ 
         $(this).addClass('active'); 
        }else{ 
         $(this).removeClass('active'); 
        }; 
       }); 

      } 
     }; 
    }) 

.controller('myController', function($scope){ 
    $scope.filterArray = []; 
    $scope.buttons = ['corn', 'vegetable', 'onion']; 
    $scope.content = [ 
     { 

      "type": [ 
       "recipe" 
      ], 
      "data": { 
       "prepTimeInMinutes": 10, 
       "serves": "6 to 8", 
       "headline": "North Carolina Piedmont Slaw", 
       "ingredients": [ 
        { 
         "item": "medium head cabbage", 
         "quantity": { 
          "number": 1 
         }, 
         "notes": "cored and chopped (5 to 6 cups)" 
        }, 
        { 
         "unit": "cup", 
         "item": "ketchup", 
         "quantity": { 
          "number": 1 
         } 
        }, 
        { 
         "unit": "tbsp.", 
         "item": "sugar", 
         "quantity": { 
          "number": 3 
         } 
        }, 
        { 
         "unit": "tbsp.", 
         "item": "apple cider vinegar", 
         "quantity": { 
          "number": 1 
         } 
        }, 
        { 
         "unit": "tsp.", 
         "item": "kosher salt", 
         "quantity": { 
          "fraction": { 
           "display": "½", 
           "denominator": 2, 
           "numerator": 1 
          } 
         } 
        }, 
        { 
         "unit": "tsp.", 
         "item": "black pepper", 
         "quantity": { 
          "fraction": { 
           "display": "½", 
           "denominator": 2, 
           "numerator": 1 
          } 
         }, 
         "notes": "freshly ground" 
        }, 
        { 
         "item": "Generous dash hot sauce, such as Texas Pete Hot Sauce or Tabasco brand" 
        } 
       ], 
       "description": "", 
       "cookTimeInMinutes": 180, 
       "categories": { 
        "Dish Type": [ 
         "Side" 
        ], 
        "Main Ingredient": [ 
         "Vegetable" 
        ] 
       }, 
       "cookingDirections": [ 
        { 
         "step": "Place the cabbage in a large bowl." 
        }, 
        { 
         "step": "Combine the ketchup, sugar, vinegar, salt, pepper and hot sauce in a liquid measuring cup. Pour over the cabbage and toss to coat thoroughly. Cover and refrigerate for at least 3 hours, and preferably overnight, before serving." 
        }, 
        { 
         "step": "Serve on top of the pulled pork" 
        } 
       ] 
      } 
     } 



    ] 










}); 

我有使用數組的工作自定義過濾器,但是用嵌套對象數組。做這種過濾的最佳方法是什麼? $ filter服務已經提供了基於數組的搜索嗎?

回答

0

如果您需要根據字符串數組篩選對象(匹配對象屬性),我會查看lodash#omit

用法:

var obj = { a: 'a', b: 'b', c: 'c' }; 
var arr = ['a', 'c']; 

_.omit(obj, arr); // { b: 'b' } 

我不知道省略是否支持深/嵌套對象。如果沒有,你可以使用迭代器來組合它,以確定對象的給定鍵是否是一個對象本身,並在其上運行另一個省略。

相關問題