AngularJS (Filter) : How to implement multi-keyword search on object attributes?

Question

Check this jsFiddle : http://jsfiddle.net/mystikacid/hajo0c33/

I'm using the keyword in the input box to filter the objects to be shown. This works fine as far as I enter only one keyword. But if I try to filter by two keywords (for two attributes, example, my query is - 'Transformers 150V' as I want to look for those Transformers which use 150V, it does not show any result.

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <input type='text' ng-model='query' placeholder = "Search" />
    <div ng-repeat="product in products | filter : query">
        {{product.name}} | 
        {{product.family}} | 
        {{product.amperage}} |
        {{product.volt}}
    </div>
</div>

Javascript

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope){

$scope.products = [
    {
        name : '9T21S1050',
        family : 'Transformer',
        amperage : '20A',
        volt : '150V'
    },
    {
        name : '9T85B3092',
        family : 'Transformer',
        amperage : '15A',
        volt : '200V'
    },
    {
        name : 'AEU3182RCXAXB4',
        family : 'Panel Board',
        amperage : '30A',
        volt : '250V'
    },
    {
        name : 'AQU1182RCXAXB4',
        family : 'Panel Board',
        amperage : '25A',
        volt : '300V'
    },
    {
        name : 'AQU1422RCXAXT1',
        family : 'Panel Board',
        amperage : '35A',
        volt : '150V'
    }
]


});

I understand that I need to write a function for the filter, but I've not been able to make it work so far. Let me know if you'd like to see the function too. Thanks.

rajeshpanwar · Accepted Answer · 2014-08-21 07:49:05Z

8

i am creating a new filter that will give product if both value will be present in it.

var m = angular.module('yourModuleName');
m.filter('advancefilter', ['$filter', function($filter){
    return function(data, text){
        var textArr = text.split(' ');
        angular.forEach(textArr, function(test){
            if(test){
                  data = $filter('filter')(data, test);
            }
        });
        return data;
    }
}]);

answered Aug 21, 2014 at 7:49

rajeshpanwar

1,2331 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vikram Babu Nagineni Over a year ago

Dont forget to add null check for text.

Collectives™ on Stack Overflow

AngularJS (Filter) : How to implement multi-keyword search on object attributes?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related