Home > Developer > Web Develop
Angularjs Another feature is the provision of filters that can manipulate the data results by manipulating the Unix down-channel.
By using pipelines, you can facilitate the presentation of views in two-way data binding.
Filters in the process, the data into a new format, and can use the chain style of the pipeline, but also accept additional parameters.
Implementation methodHere's a look at how to define a filter, and the first thing to do is to create our own module Myappmodule
var myappmodule = Angular.module ("myApp", []);Next, on the basis of the module, create the 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) {varout = ""; for(vari=0; i<input.length; i++) { out= Input.charat (i) +Out ; } if(uppercase) {out=out.touppercase (); } returnOut ; } });
The internally returned method contains two parameters, one is the input value, and the value that our filter accepts.
If you want to implement the following filter:
name | Reverse
Then input is the value in which name is represented.
The following parameters are optional, and we accept the bool value of uppercase here to determine if a 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>name:{{Name}}<br>Reverse name:{{name| Reverse}}<br>Reverse&uppercase name:{{name | reverse:true }} </div> <script type= "Text/javascript" >varMyappmodule = Angular.module ("myApp",[]); Myappmodule.controller ("Myappctrl", ["$scope",function($scope) {$scope. Name= "Xingoo"; }]); Myappmodule.filter ("Reverse",function(){ return function(input,uppercase) {varout = ""; for(vari=0; i<input.length; i++) { out= Input.charat (i) +Out ; } if(uppercase) {out=out.touppercase (); } returnOut ; } }); </script> </body>Run results
"AngularJS"--9 Custom Filters
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
