AngularJS : Custom filters and ng-repeat -


i'm angularjs newbie , i'm building small proof-of-concept car hire listings app pulls in json , renders out various bits of data via ng-repeat, couple of filters:

   <article data-ng-repeat="result in results | filter:search" class="result">         <header><h3>{{result.cartype.name}}, {{result.cardetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header>             <ul class="result-features">                 <li>{{result.cardetails.hireduration}} day hire</li>                 <li data-ng-show="result.cardetails.aircon">air conditioning</li>                 <li data-ng-show="result.cardetails.unlimitedmileage">unlimited mileage</li>                 <li data-ng-show="result.cardetails.theftprotection">theft protection</li>             </ul>     </article>      <h2>filters</h2>      <h4>doors:</h4>      <select data-ng-model="search.cardetails">         <option value="">all</option>         <option value="2">2</option>         <option value="4">4</option>         <option value="9">9</option>     </select>      <h4>provider:</h4>     atlas choice <input type="checkbox"  data-ng-model="search.company" ng-true-value="atlas choice" ng-false-value="" value="atlas choice" /><br>     holiday autos <input type="checkbox"  data-ng-model="search.company" ng-true-value="holiday autos" ng-false-value="" value="holiday autos" /><br>     avis <input type="checkbox"  data-ng-model="search.company" ng-true-value="avis" ng-false-value="" value="avis" /><br>       

now want create custom filter in controller, can iterate on items in ng-repeat , return items meet criteria - example, might create array of values based on 'provider' checkboxes checked, evaluate each ng-repeat item against that. can't work out how i'd though, in terms of syntax - can help?

here's plunker: http://plnkr.co/edit/lnjnyagmc2rszbsof95k?p=preview

if want run custom filter logic can create function takes array element argument , returns true or false based on whether should in search results. pass filter instruction search object, example:

js:

$scope.filterfn = function(car) {     // tests      if(car.cardetails.doors > 2)     {         return true; // listed in results     }      return false; // otherwise won't within results }; 

html:

... <article data-ng-repeat="result in results | filter:search | filter:filterfn" class="result"> ... 

as can see can chain many filters together, adding custom filter function doesn't force remove previous filter using search object (they work seamlessly).


Comments

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

Pull out data related to my apps from Android Play Store and iOS App Store -

How can I fetch data from a web server in an android application? -