Filters within controllers (mini-challenges 12)
AngularJs Mini-Challenges is a growing collection of "Challenges" about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.
AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:
Book Tip
ng-book - The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?
The Challenge:
How would you use filters within controllers like "filter" in JavaScript? And how to create a custom filter?
For example in the html you can use filter's filter to do a search in a list of elements:
<tr ng-repeat="friend in friends | filter:searchText">
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
Solution:
In AngularJs you can inject the $filter service within the controller, and use it with the following syntax for "filter":
$filter('filter')(array, expression, comparator, anyPropertyKey)
function myController($scope, $filter)
{
$scope.result = $filter('filter')($scope.arrayOfObjects, $scope.searchCriteria);
}
You can also use other AngularJs filters Build-in like:
$scope.formatedDate = $filter('date')($scope.date, "yyyy-MM-dd");
$scope.result = $filter('lowercase')($scope.name);
You can find here a list of build-in AngularJs filters:
https://docs.angularjs.org/api/ng/filter
Filter Example with pipe in the HTML:
Filter example within the controller using Javascript:
How to create custom filters in AngularJs
AngulrJs have a build-in method to register custom filters, using the same approach you can use when you register a controller, a service and factories. See following example:
var myApp = angular.module('myApp', []);
app.filter('myFilter', function() {
return function(input, option1, option2) {
var output;
// Logic to make your filter works.
return output;
}
});
for more reference about how to create a custom filter you can refer to https://scotch.io/tutorials/building-custom-angularjs-filters
