AngularJS custom filter function

You can use it like this:http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

Like you found, filter accepts predicate function which accepts itemby item from the array.So, you just have to create an predicate function based on the given criteria.

In this example, criteriaMatch is a function which returns a predicatefunction which matches the given criteria.

template:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">  {{ item }}</div>

scope:

$scope.criteriaMatch = function( criteria ) {  return function( item ) {    return item.name === criteria.name;  };};

Here's an example of how you'd use filter within your AngularJS JavaScript (rather than in an HTML element).

In this example, we have an array of Country records, each containing a name and a 3-character ISO code.

We want to write a function which will search through this list for a record which matches a specific 3-character code.

Here's how we'd do it without using filter:

$scope.FindCountryByCode = function (CountryCode) {    //  Search through an array of Country records for one containing a particular 3-character country-code.    //  Returns either a record, or NULL, if the country couldn't be found.    for (var i = 0; i < $scope.CountryList.length; i++) {        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {            return $scope.CountryList[i];        };    };    return null;};

Yup, nothing wrong with that.

But here's how the same function would look, using filter:

$scope.FindCountryByCode = function (CountryCode) {    //  Search through an array of Country records for one containing a particular 3-character country-code.    //  Returns either a record, or NULL, if the country couldn't be found.    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.    if (matches.length == 0)        return null;    //  Otherwise, it should've found just one matching record    return matches[0];};

Much neater.

Remember that filter returns an array as a result (a list of matching records), so in this example, we'll either want to return 1 record, or NULL.

Hope this helps.

Additionally, if you want to use the filter in your controller the same way you do it here:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">  {{ item }}</div>

You could do something like:

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');