Angular js ng-repeat filter by property having one of multiple values OR of values

Question

Is it possible to filter an array of objects  such that the value of property can be either of a few values  OR condition  without writing a custom filter  This is similar to this problem - Angular js ng-repeat  filter by single field  But instead of    lt div ng-repeat  product in products   filter    color   red     gt    is it possible to do something like this   lt div ng-repeat  product in products   filter    color   red    blue     gt    for a sample data as follows-   scope products          id  1  name   test   color   red          id  2  name   bob   color   blue             etc            I ve unsuccessfully tried    lt div ng-repeat  product in products   filter    color    red    blue      gt

User · Answer

After not able to find a good universal solution I made something of my own. I have not tested it for a very large list.

It takes care of nested keys,arrays or just about anything.

Here is the github and demo

app.filter('xf', function() {
    function keyfind(f, obj) {
        if (obj === undefined)
            return -1;
        else {
            var sf = f.split(".");
            if (sf.length <= 1) {
                return obj[sf[0]];
            } else {
                var newobj = obj[sf[0]];
                sf.splice(0, 1);
                return keyfind(sf.join("."), newobj)
            }
        }

    }
    return function(input, clause, fields) {
        var out = [];
        if (clause && clause.query && clause.query.length > 0) {
            clause.query = String(clause.query).toLowerCase();
            angular.forEach(input, function(cp) {
                for (var i = 0; i < fields.length; i++) {
                    var haystack = String(keyfind(fields[i], cp)).toLowerCase();
                    if (haystack.indexOf(clause.query) > -1) {
                        out.push(cp);
                        break;
                    }
                }
            })
        } else {
            angular.forEach(input, function(cp) {
                out.push(cp);
            })
        }
        return out;
    }

})

HTML

<input ng-model="search.query" type="text" placeholder="search by any property">
<div ng-repeat="product in products |  xf:search:['color','name']">
...
</div>

User · Answer

Here is a way to do it while passing in an extra argument   https   stackoverflow com a 17813797 4533488  thanks to Denis Pshenov    lt div ng-repeat  group in groups  gt       lt li ng-repeat  friend in friends   filter weDontLike group enemy name   gt           lt span gt   friend name   lt  span gt       lt li gt   lt  div gt    With the backend     scope weDontLike   function name        return function friend            return friend name    name                 And yet another way with an in-template filter only   https   stackoverflow com a 12528093 4533488  thanks to mikel    lt div ng app gt     lt div ng-controller  HelloCntl  gt       lt ul gt          lt li ng-repeat  friend in friends   filter  name   Adam    gt               lt span gt   friend name   lt  span gt               lt span gt   friend phone   lt  span gt           lt  li gt       lt  ul gt   lt  div gt

User · Answer

I thing ng-if should work    lt div ng-repeat  product in products  ng-if  product color      red      product color      blue   gt

User · Answer

Best way to do this is to use a function    lt div ng-repeat  product in products   filter  myFilter  gt    scope myFilter   function  item         return item      red     item      blue         Alternatively  you can use ngHide or ngShow to dynamically show and hide elements based on a certain criteria

User · Answer

In HTML    lt div ng-repeat  product in products   filter  colorFilter  gt   In Angular    scope colorFilter   function  item       if  item color      red     item color      blue       return item

User · Answer

I found a more generic solution with the most angular-native solution I can think  Basically you can pass your own comparator to the default filterFilter function  Here s  plunker as well

User · Answer

For me  it worked as given below    lt div ng-repeat  product in products   filter    color   red    blue     gt    lt div ng-repeat  product in products   filter    color   red     filter    color  blue     gt

[javascript] Angular.js ng-repeat filter by property having one of multiple values (OR of values)

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to angularjs-filter