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, £{{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
Post a Comment