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 · Accepted Answer

Best way to do this is to use a function:

<div ng-repeat="product in products | filter: myFilter">

$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

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

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

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

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

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  lt   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  amp  amp  clause query  amp  amp  clause query length  gt  0                clause query   String clause query  toLowerCase                angular forEach input  function cp                    for  var i   0  i  lt  fields length  i                          var haystack   String keyfind fields i   cp   toLowerCase                        if  haystack indexOf clause query   gt  -1                            out push cp                           break                                                                   else               angular forEach input  function cp                    out push cp                                    return out              HTML    lt input ng-model  search query  type  text  placeholder  search by any property  gt   lt div ng-repeat  product in products    xf search   color   name    gt       lt  div 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