Another feature of AngularJS is that it provides filters that can operate data results by operating the pipeline under UNIX.
By using pipelines, the display of views in two-way data binding can be facilitated.
During processing, the filter turns the data into a new format, and can use the chain style of pipelines and accept additional parameters.
Implementation method
Let's take a look at how to define and declare a filter. First, we still need to create our own module myAppModule
var myAppModule=agular.module("myApp",[]);
Next, based on the module, create a filter:
myAppModule.filter("reverse",function(){
});
Where reverse is the name of the filter, followed by the method declaration of the filter, and another method is returned in the method:
myAppModule.filter("reverse",function(){ return function(input,uppercase){ var out = ""; for(var i=0 ; i<input.length; i++){ out = input.charAt(i)+out; } if(uppercase){ out = out.toUpperCase(); } return out; } });The internal returned method contains two parameters, one is the input value, which is the value accepted by our filter.
If you want to implement the following filter:
name | reverse
Then input is the value represented by name.
The following parameters are optional. We here accept the bool value of uppercase and determine whether to perform case conversion.
There is no need to explain the internal code. Finally, return the filtered string.
Program Sample
<!doctype html><html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div ng-controller="myAppCtrl"> name:{{ name }}<br> reverse name:{{ name | reverse }}<br> reverse&uppercase name:{{ name | reverse:true }} </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",["$scope",function($scope){ $scope.name = "xingoo"; }]); myAppModule.filter("reverse",function(){ return function(input,uppercase){ var out = ""; for(var i=0 ; i<input.length; i++){ out = input.charAt(i)+out; } if(uppercase){ out = out.toUpperCase(); } return out; } }); </script> </body></html>Running results
The above is a collection of information on AngularJS custom filters. We will continue to add relevant information in the future. Thank you for your support for this site!