Another feature of Angularjs is that it provides a filter that can manipulate data results by manipulating the channel under UNIX.
By using pipelines, you can facilitate the presentation of views in bidirectional data binding.
Filters in the process, the data into a new format, and you can use the chain style pipe, but also accept additional parameters.
Implementation mode
Let's look at how to define a filter, which is still the first to create our own module Myappmodule
var myappmodule=agular.module ("MyApp", []);
Next, based on the module, create the filter:
Myappmodule.filter ("Reverse", function () {
});
Where reverse is the name of the filter, followed by a method declaration of the filter, which returns 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 internal return method contains two parameters, one is the input value, and is the value that our filter accepts.
If you want to implement the following filter:
name | Reverse
Input is the value in which name is represented.
The arguments that follow are optional, and here we accept the bool value of uppercase to determine whether the case conversion is required.
Internal implementation of the code, there is no need to explain. Finally, the filtered string is returned.
Program examples
<!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>
Run results
The above is the ANGULARJS custom filter data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
