角实现多搜索过滤器 [英] Angular Implementing multi search filter

问题描述

我使用的角度先进的搜索框，我想实现一个自定义筛选我的角度页面，但我有麻烦搞清楚如何处理的查询要求的字符串。比方说，我有一个遵循以下格式几个对象：

I am using the angular advanced search box and I want to implement a custom filter in my angular page but I am having trouble figuring out how to handle a string of requirements in a query. Let's say I have several objects that follow the following format:

{
    "displayName":"John",
    "gender":"male",
    "type":"customer",
    "items": 3,
}

我希望能够用简单的英语'任何人谁的名字是约翰，类型客户的搜索这是我的角度搜索code迄今：

I would want to be able to search in plain english `Anyone who's name is John and is of type Customer". Here is my angular search code so far:

app.filter('infoFilter', function() {
    return function(data, query) {
        var output = [];
        var index;

        //loop over the original array
        angular.forEach(data, function(row, index) {
            angular.forEach(query, function(input, value) {
                if(input) {
                    if(angular.isNumber(row[value]) && row[value] == input) {
                        output.push(row);
                    } else if(!angular.isNumber(row[value]) && row[value].toLowerCase().indexOf(input.toLowerCase()) > -1) {
                        output.push(row);
                    }
                }
            });
        });
        if(query) {
            return data;
        } else {
            return output;
        }
    }
});

查询进来作为一个对象，看起来像这样：

The query comes in as an object that looks like this:

{
    "displayName":"John"
}

这适用于1搜索参数完全正常。所以，如果我搜索约翰我的表将更新，以显示与约翰的名字所有条目。然而，这将不是真正的多搜索参数工作。因此，如果查询是这样的：

This works perfectly fine for 1 search parameter. So if I searched for John my table would update to show all entries with the name of john. However, this wouldn't really work for multi search parameters. So if the query looked like this:

{
    "displayName":"John",
    "gender":"Female"
}

我需要一次之前，我做申请的所有参数 output.push（行）。我究竟是如何去这样做呢？

I need to apply all the parameters at once before i do output.push(row). How exactly would I go about doing this?

推荐答案

如果我理解正确，你想要的，所有的查询参数适用（AND）来过滤行。我修改了code稍微来实现这一行为。

If I understand you correctly you want to filter the rows where all query parameters apply (AND). I modified your code slightly to achieve this behavior.

app.filter('infoFilter', function() {
    return function(data, query) {
        var output = [];
        var index;

        //loop over the original array
        angular.forEach(data, function(row, index) {

            var pushRow = true;

            angular.forEach(query, function(input, value) {
                if(input) {
                    if(angular.isNumber(row[value]) && row[value] == input) {
                        return;
                    } else if(!angular.isNumber(row[value]) && row[value].toLowerCase().indexOf(input.toLowerCase()) > -1) {
                        return;
                    }
                }
                pushRow = false;
            });

            if (pushRow) {
                output.push(row);
            }
        });

        // This bit also seems to be the wrong way around in your code.
        if(!query) {
            return data;
        } else {
            return output;
        }
    }
});

编辑：

下面是同样使用JavaScript脚本的内置阵列功能的。

Here is also an optimized version of the same filter using javascripts built in array functions.

app.filter('infoFilter', function() {
    return function(data, query) {
        if(!query || !data) {
            return data;
        }

        return data.filter(function(row) {
            return Object.keys(query).every(function(key) {
                var rowValue = row[key];
                var queryValue = query[key];

                return (angular.isNumber(rowValue) && rowValue == input) ||
                        (angular.isString(rowValue) && rowValue.toLowerCase().indexOf(queryValue.toLowerCase()) > -1);
            });
        });
    };
});

这篇关于角实现多搜索过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！