Skip to content Skip to sidebar Skip to footer

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

Solution 1:

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() {
    returnfunction(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;
                    } elseif(!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;
        }
    }
});

Edit:

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

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

        return data.filter(function(row) {
            returnObject.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);
            });
        });
    };
});

Post a Comment for "Angular Implementing Multi Search Filter"