Creating Custom Filters
AngularJS allows you to create your own custom filter provider and then use it in expressions, controllers, and services as if it were a built-in filter. AngularJS provides the filter() method to create a filter provider and register it with the dependency injector server.
The filter() method accepts a name for the filter as the first argument and a function for the second argument. The filter function should accept the expression input as the first parameter and any additional parameters following that. For example:
filter('myFilter', function(){
return function(input, param1, param2){
return <<modified input>>;
};
});
Inside the filter function you can change the value of the input any way you like. Whatever value is returned from the filter function is returned as the expression results.
Listings 23.7 and 23.8 create a custom filter function that censors words from a string and allows for a replacement value as an optional parameter. Listing 23.7 implements the censor filter provider in lines 2–10. Then in lines 12–19 the controller adds the censorFilter provider, using dependency injection. The fitlerText() function in lines 16–18 utilizes the censorFilter provider to censor text and replace it with <<censored>>.
The code in Listing 23.8 implements a template that utilizes the filter in a couple different ways, including calling filterText() based on a click event. Figure 23.4 shows the output of these listings.
Listing 23.7 angular_filter_customer.js: Implementing a custom filter provider in AngularJS
01 angular.module('myApp', []).
02 filter('censor', function() {
03 return function(input, replacement) {
04 var cWords = ['bad', 'evil', 'dark'];
05 var out = input;
06 for(var i=0; i<cWords.length; i++){
07 out = out.replace(cWords[i], replacement);
08 }
09 return out;
10 };
11 }).
12 controller('myController', ['$scope', 'censorFilter',
13 function($scope, censorFilter) {
14 $scope.phrase="This is a bad phrase.";
15 $scope.txt = "Click to filter out dark and evil.";
16 $scope.filterText = function(){
17 $scope.txt = censorFilter($scope.txt, '<<censored>>'),
18 };
19 }]);
Listing 23.8 angular_filter_custom.html: An AngularJS template that uses a custom filter
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Custom Filter</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h2>Sorting and Filtering</h2>
09 {{phrase | censor:"***"}}<br>
10 {{"This is some bad, dark evil text." | censor:"happy"}}
11 <p ng-click="filterText()">{{txt}}</p>
12 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
13 <script src="/js/angular_filter_custom.js"></script>
14 </body>
15 </html>
