Filtering by Multiple Specific Model Properties in AngularJS in OR relationship

Question

Take a look at the example here   http   docs angularjs org api ng filter filter  You can search by any of the phone properties by using  lt input ng-model  search  gt  and you can search by just the name by using  lt input ng-model  search name  gt   and the results are appropriately filtered by name  typing in a phone number does not return any results  as expected    Let s say I have a model with a  name  property  a  phone  property  and a  secret  property  how would I go about filtering by both the  name  and  phone  properties and not the  secret  property   So in essence  the user could type a name or phone number and the ng-repeat would filter correctly  but even if the user typed in a value that equaled part of a  secret  value  it wouldn t return anything   Thanks

User · Answer

You can pass an Object as the parameter to your filter expression, as described in the API Reference. This object can selectively apply the properties you're interested in, like so:

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

Here's a Plunker

Heads up...this example works great with AngularJS 1.1.5, but not always as well in 1.0.7. In this example 1.0.7 will initialize with everything filtered out, then work when you start using the inputs. It behaves like the inputs have non-matching values in them, even though they start out blank. If you want to stay on stable releases, go ahead and try this out for your situation, but some scenarios may want to use @maxisam's solution until 1.2.0 is released.

User · Answer

I like to keep is simple when possible  I needed to group by International  filter on all the columns  display the count for each group and hide the group if no items existed   Plus I did not want to add a custom filter just for something simple like this            lt tbody gt               lt tr ng-show  fusa length  gt  0  gt  lt td colspan  8  gt  lt h3 gt USA    fusa length    lt  h3 gt  lt  td gt  lt  tr gt               lt tr ng-repeat  t in fusa    usa    vm assignmentLookups   filter   isInternational  false     filter  vm searchResultText   gt                   lt td gt    index   1   lt  td gt                   lt td ng-bind-html  vm highlight t title  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t genericName  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t mechanismsOfAction  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t diseaseStateIndication  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t assignedTo  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  t lastPublished   date  medium   gt  lt  td gt               lt  tr gt           lt  tbody gt           lt tbody gt               lt tr ng-show  fint length  gt  0  gt  lt td colspan  8  gt  lt h3 gt International    fint length    lt  h3 gt  lt  td gt  lt  tr gt               lt tr ng-repeat  t in fint    int    vm assignmentLookups   filter   isInternational  true     filter  vm searchResultText   gt                   lt td gt    index   1   lt  td gt                   lt td ng-bind-html  vm highlight t title  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t genericName  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t mechanismsOfAction  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t diseaseStateIndication  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  vm highlight t assignedTo  vm searchResultText   gt  lt  td gt                   lt td ng-bind-html  t lastPublished   date  medium   gt  lt  td gt               lt  tr gt           lt  tbody gt

User · Answer

I might be very late but this is what I ended up doing  I made a very general filter   angular module  app filters   filter  fieldFilter   function             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 cp fields i    toLowerCase                            if  haystack indexOf clause query   gt  -1                                out push cp                               break                                                                                   else                   angular forEach input  function cp                        out push cp                                                return out                      Then use it like this   lt tr ng-repeat-start  dvs in devices    fieldFilter search   name   device id    gt  lt  tr gt    Your search box be like   lt input ng-model  search query  class  form-control material-text-input  type  text  gt    where name and device id are properties in dvs

User · Answer

Filter can be a JavaScript object with fields and you can have expression as    ng-repeat   item in list   filter   property value

User · Answer

http   plnkr co edit A2IG03FLYnEYMpZ5RxEm p preview  Here is a case sensitive search that also separates your search into words to search in each model as well   Only when it finds a space will it try to split the query into an array and then search each word     It returns true if every word is at least in one of the models      scope songSearch   function  row        var query   angular lowercase  scope query       if  query indexOf       gt  0            query array   query split               search result   false          for  x in query array                query   query array x               if  angular lowercase row model1  indexOf query            -1    angular lowercase row model2  indexOf query            -1    angular lowercase row model3  indexOf query            -1                   search result   true                else                   search result   false                  break                                  return search result        else           return  angular lowercase row model1  indexOf query            -1    angular lowercase row model2  indexOf query            -1    angular lowercase row model3  indexOf query            -1

User · Answer

Hope this answer will help Multiple Value Filter  And working example in this fiddle  arrayOfObjectswithKeys   filterMultiple  key1   value1   value2   value3     etc  key2  value4  key3  value5 value6    etc

User · Answer

If you re open to use third party libraries  Angular Filters  with a nice collection of filters may be useful   https   github com a8m angular-filter filterby  collection   filterBy   prop  nested prop  etc     search

User · Answer

I solved this simply    lt div ng-repeat  Object in List   filter   FilterObj FilterProperty1     ObjectProperty1   FilterObj FilterProperty1          filter  FilterObj FilterProperty2     ObjectProperty2   FilterObj FilterProperty2         gt

User · Answer

I inspired myself from  maxisam s answer and created my own sort function and I d though I d share it  cuz I m bored    Situation I want to filter through an array of cars  The selected properties to filter are name  year  price and km  The property price and km are numbers  hence the use of  toString   I also want to control for uppercase letters  hence  toLowerCase   Also I want to be able to split up my filter query into different words  e g  given the filter 2006 Acura  it finds matches 2006 with the year and Acura with the name    Function I pass to filter          var attrs    car name toLowerCase    car year  car price toString    car km toString                 filters    scope tableOpts filter toLowerCase   split                   isStringInArray   function  string  array                   for  var j 0 j lt array length j                         if  array j  indexOf string    -1  return true                                     return false                          for  var i 0 i lt filters length i                 if   isStringInArray filters i   attrs   return false                     return true

User · Answer

There are a bunch of good solutions here but I d suggest going the other route with this  If searching is the most important thing and the  secret  property is not used on the view at all  my approach for this would be to use the built-in angular filter with all its benefits and simply map the model to a new array of objects   Example from the question    scope people   members map function member                                   return                                    name  member name                                   phone  member phone                                      Now  in html simply use the regular filter to search both these properties    lt div ng-repeat  member in people   filter  searchString  gt

User · Answer

Here s simple solution for those who want a quick filter against an object    lt select gt     lt option ng-repeat  card in deck Cards   filter   Type   Face    gt   card Name   lt  option gt   lt  select gt    The array filter lets you mimic the object you are trying to filter   In the above case  the following classes would work just fine   var card   function name  type      var  name   name    var  type   type     return       Name   name      Type   type           And where the deck might look like   var deck   function       var  cards    new card  Jack    Face                    new card  7    Numeral        return       Cards   cards           And if you want to filter multiple properties of the object just separate field names by a comma    lt select gt     lt option ng-repeat  card in deck Cards   filter   Type   Face   Name   Jack    gt   card Name   lt  option gt   lt  select gt    EDIT  Here s a working plnkr that provides an example of single and multiple property filters   http   embed plnkr co i0wCx6l1WPYljk57SXzV

User · Answer

Pretty straight forward approach using filterBy in angularJs  For working plnkr follow this link  http   plnkr co edit US6xE4h0gD5CEYV0aMDf p preview  This has specially used a single property to search against multiple column but not all    lt  DOCTYPE html gt   lt html ng-app  myApp  gt      lt head gt       lt script data-require  angular js 1 4 1  data-semver  1 4 1  src  https   code angularjs org 1 4 1 angular js  gt  lt  script gt       lt script data-require  angular-filter 0 5 2  data-semver  0 5 2  src  https   cdnjs cloudflare com ajax libs angular-filter 0 5 2 angular-filter js  gt  lt  script gt       lt link rel  stylesheet  href  style css    gt       lt script src  script js  gt  lt  script gt     lt  head gt      lt body ng-controller  myCtrl as vm  gt     lt input type  text  placeholder  enter your search text  ng-model  vm searchText    gt      lt table gt        lt tr ng-repeat  row in vm tableData   filterBy    col1   col2    vm searchText  gt          lt td gt   row col1   lt  td gt          lt td gt   row col2   lt  td gt          lt td gt   row col3   lt  td gt        lt  tr gt      lt  table gt      lt p gt This will show filter from  lt b gt two columns lt  b gt  only col1 and col2    Not from all  Whatever columns you add into filter array they    will be searched  all columns will be used by default if you use  lt b gt filter  vm searchText lt  b gt  lt  p gt     lt  body gt   lt  html gt    controller     Code goes here  function       var myApp   angular module  myApp    angular filter        myApp controller  myCtrl   function  scope       var vm  this      vm x   20       vm tableData                     col1   Ashok           col2   Tewatia           col3   12                    col1   Babita           col2   Malik           col3   34                    col1   Dinesh           col2   Tewatia           col3   56                    col1   Sabita           col2   Malik           col3   78

User · Answer

Here is the plunker   New plunker with cleaner code  amp  where both the query and search list items are case insensitive  Main idea is create a filter function to achieve this purpose   From official doc     function  A predicate function can be used to write arbitrary filters    The function is called for each element of array  The final result is   an array of those elements that the predicate returned true for     lt input ng-model  query  gt    lt tr ng-repeat  smartphone in smartphones   filter  search   gt        scope search   function item        if    scope query     item brand toLowerCase   indexOf  scope query     -1      item model toLowerCase   indexOf  scope query toLowerCase       -1             return true            return false       Update  Some people might have a concern on performance in real world  which is correct   In real world  we probably would do this kinda filter from controller   Here is the detail post showing how to do it   in short  we add ng-change to input for monitoring new search change   and then trigger filter function

[angularjs] Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

Examples related to angularjs