AngularJS Custom filters and ng-repeat

Question

I m an AngularJS newbie and I m building up a small proof-of-concept car hire listings app that pulls in some JSON and renders out various bits of that data via an ng-repeat  with a couple of filters       lt article data-ng-repeat  result in results   filter search  class  result  gt           lt header gt  lt h3 gt   result carType name      result carDetails doors   door   amp pound   result price value   -    result company name    lt  h3 gt  lt  header gt               lt ul class  result-features  gt                   lt li gt   result carDetails hireDuration   day hire lt  li gt                   lt li data-ng-show  result carDetails airCon  gt Air conditioning lt  li gt                   lt li data-ng-show  result carDetails unlimitedMileage  gt Unlimited Mileage lt  li gt                   lt li data-ng-show  result carDetails theftProtection  gt Theft Protection lt  li gt               lt  ul gt       lt  article gt        lt h2 gt Filters lt  h2 gt        lt h4 gt Doors  lt  h4 gt        lt select data-ng-model  search carDetails  gt           lt option value    gt All lt  option gt           lt option value  2  gt 2 lt  option gt           lt option value  4  gt 4 lt  option gt           lt option value  9  gt 9 lt  option gt       lt  select gt        lt h4 gt Provider  lt  h4 gt      Atlas Choice  lt input type  checkbox   data-ng-model  search company  ng-true-value  Atlas Choice  ng-false-value    value  Atlas Choice    gt  lt br gt      Holiday Autos  lt input type  checkbox   data-ng-model  search company  ng-true-value  Holiday Autos  ng-false-value    value  Holiday Autos    gt  lt br gt      Avis  lt input type  checkbox   data-ng-model  search company  ng-true-value  Avis  ng-false-value    value  Avis    gt  lt br gt          Now I want to create a custom filter in my controller  that can iterate over the items in my ng-repeat and return only the items that meet certain criteria - for example  I might create an array of values based on which  provider  checkboxes are checked  then evaluate each ng-repeat item against that  I just can t work out how I d do that though  in terms of the syntax - can anyone help   Here s my Plunker  http   plnkr co edit lNJNYagMC2rszbSOF95k p preview

User · Answer

You can call more of 1 function filters in the same ng-repeat filter   lt article data-ng-repeat  result in results   filter search     filter filterFn    class  result  gt

User · Answer

If you want to run some custom filter logic you can create a function which takes the array element as an argument and returns true or false based on whether it should be in the search results  Then pass it to the filter instruction just like you do with the search object  for example   JS    scope filterFn   function car           Do some tests      if car carDetails doors  gt  2                return true     this will be listed in the results            return false     otherwise it won t be within the results      HTML        lt article data-ng-repeat  result in results   filter search   filter filterFn  class  result  gt        As you can see you can chain many filters together  so adding your custom filter function doesn t force you to remove the previous filter using the search object  they will work together seamlessly

User · Answer

If you still want a custom filter you can pass in the search model to the filter    lt article data-ng-repeat  result in results   cartypefilter search  class  result  gt    Where definition for the cartypefilter can look like this   app filter  cartypefilter   function       return function items  search        if   search          return items             var carType   search carType      if   carType           carType          return items             return items filter function element  index  array          return element carType name     search carType                      http   plnkr co edit kBcUIayO8tQsTTjTA2vO p preview

User · Answer

One of the easiest ways to fix this is to use the   which is the search all   Here is a plunker that shows it working  I have changed the checkboxes to radio   because I thought they should be complementary       http   plnkr co edit dHzvm6hR5P8G4wPuTxoi p preview  If you want a very specific way of doing this   instead of doing a generic search   you need work with functions in the search    The documentation is here  http   docs angularjs org api ng filter filter

[angularjs] AngularJS : Custom filters and ng-repeat

Examples related to angularjs

Examples related to ng-repeat

Examples related to angular-filters