AngularJS: custom filters and ng-repeat

Question

I am new to AngularJS and I am creating a small car rental application that pulls in some kind of JSON and displays various bits of this data via ng-repeat, with several 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 I want to create a custom filter in my controller, which can iterate over the elements in my ng-repeat and return only those elements that meet certain criteria - for example, I can create an array of values ​​based on which the "flag" provider "is checked, and then evaluates every ng-repeat element, I just can't figure out how to do this, though in terms of syntax - can anyone help?

Here is my plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Answer 1

If you want to run some custom filter logic, you can create a function that takes an array element as an argument and returns true or false depending on whether it should be in the search results. Then pass it to the filter command just like you do with the search object, for example:

JS:

 $scope.filterFn = function(car) { // Do some tests if(car.carDetails.doors > 2) { return true; // this will be listed in the results } return false; // otherwise it won't be within the results }; 

HTML:

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

As you can see, you can link many filters together, so adding a custom filter function does not force you to delete the previous filter using the search object (they will work together without problems).

Answer 2

If you still need a custom filter, you can go to the filter search model:

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

If the definition for a file filter might 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

Answer 3

You can call more than 1 functional filters in the same ng-repeat filter

 <article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result"> 

Answer 4

One of the easiest ways to fix this is to use $ , which is a search for everyone.

Here is a plunker that shows that it works. I changed the checkboxes on the radio (because I thought they should complement each other).

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

If you need a very specific way to do this (instead of doing a general search), you need to work with functions in the search.

Documentation here

http://docs.angularjs.org/api/ng.filter:filter