2015-07-10 78 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' } 

我不知道省略是否支持深/嵌套对象。如果没有,你可以使用迭代器来组合它,以确定对象的给定键是否是一个对象本身,并在其上运行另一个省略。

相关问题