Creating Custom Filters
AngularJS enables 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 5.11 and 5.12 create a custom filter function that censors words from a string and allows for a replacement value as an optional parameter. Listing 5.11 implements the censor filter provider in lines 2–11. Then in lines 12–20 the controller adds the censorFilter provider, using dependency injection. The fitlerText() function in lines 17–19 utilizes the censorFilter provider to censor text and replace it with <<censored>>.
The code in Listing 5.12 implements a template that utilizes the filter in a couple of ways, including calling filterText() based on a click event. Notice in line 9 that the value passed to the censor filter comes from the variable censorText in the scope. Figure 5.6 shows the output of these listings.
Listing 5.11 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, myCensorFilter) {
14 $scope.censorText = "***";
15 $scope.phrase="This is a bad phrase.";
16 $scope.txt = "Click to filter out dark and evil.";
17 $scope.filterText = function(){
18 $scope.txt = myCensorFilter($scope.txt, '<<censored>>'),
19 };
20 }]);
Listing 5.12 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:censorText}}<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.3.0/angular.min.js"></script>
13 <script src="js/filter_custom.js"></script>
14 </body>
15 </html>
