Home > Developer > Web Develop
The ANGULARJS filter is used to format the output data. In addition to formatting data, filters can also modify the DOM. This allows filters to be used to do work such as "timely adding CSS styles to the output."
For example, you might have some data that needs to be localized before it is output. You can use a chained filter to pass an expression to the following:
name | uppercase
When this expression executes, the value of name is passed to the uppercase filter.
It's very easy to write your own filter: Register a new filter (an injected) factory function in your module. This factory function must return a new filter function, and the first parameter of the filter function accepts input. Any filter parameters are passed to the filter as additional parameters.
The following example shows the reversal string literal. In addition, it conditionally capitalizes the text.
<!doctype html> No filter: {{greeting}}<br> Reverse: {{greeting|reverse} }<br> + uppercase: {{greeting|reverse:true}}<br> </div> </body>Script.js:
Angular.module (' Myreversemodule ', []). Filter (' Reverse ',function() { return function(input, uppercase) {varout = ""; for(vari = 0; i < input.length; i++) { out= Input.charat (i) +Out ; } //conditional based on optional argument if(uppercase) {out=out.touppercase (); } returnOut ; } });functionCtrl ($scope) {$scope. Greeting= ' Hello ';}Filters can be used in any API or NG. $rootScoe. Scope is executed, but is typically used to format expressions that are bound to the template.
{{ expression | filter }}Filters typically transform data into new formats during processing. It can use a chain style and can accept additional parameters.
You can use chained styles like this:
{{ expression | filter1 | filter2 }}You can also use ":" to pass additional parameters to the filter, for example, to format the number 123 as a 2-bit decimal form:
123 | number:2Here are some examples of what it looks like before and after formatting with different filters:
number filter accepts numeric parameters to make a few decimal places to display.Come on!
Angularjs Development Guide 13:ANGULARJS Filter detailed
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
