AngularJS Another feature is to provide a filter, can be operated under UNIX pipe, the operation result data.
By using a pipe, it may facilitate bidirectional data show views in binding.
In the filter process the data into a new format, such a pipe can be used and style of chain, can accept additional parameters.
Method to realize
The following look at how to define a filter statement, first of all is still to create our own modules myAppModule
var myAppModule = angular.module("myApp",[]);Next, on the basis of the module, create a filter:
myAppModule.filter("reverse",function(){
});Wherein the reverse is the name of the filter, followed by filtration's statement, return another method 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 method comprises the inner return of the two parameters, a value is entered, the filter that we acceptable values.
If you want to achieve the following filters:
name | reverseIs the value which represents the name of the input.
The latter parameter is optional, we are here to accept uppercase this bool value, determine whether to conduct case conversion.
Internal implementation of the code, there is no need to explain. And finally returns to the filtered string.
Sample Program
<!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>operation result
Reproduced in: https: //my.oschina.net/u/204616/blog/545083