Question

我希望能够根据字符串数组过滤整个对象。目前，默认过滤器将基于单个字符串值搜索整个对象，但不会搜索字符串数组。

<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服务是否已经为基于数组的搜索提供了什么？

Answer 1

如果你需要根据字符串数组过滤对象（匹配对象属性），我会调查lodash#omit。

用法：

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

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

我不确定omit是否支持深层/嵌套对象。如果没有，您可以使用迭代器来组合它以确定对象的给定键是否是对象本身并对其进行另一个省略。

基于字符串数组的角度过滤对象

1 个答案: