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:2
Here are some examples of what it looks like before and after formatting with different filters:
- No filter: {{1234.5678}} = 1234.5678
- Digital filter: {{1234.5678|number}} = 1,234.57. Note the "," number and rounding after the two bits.
- Filter with parameters: {{1234.5678|number:5}} = 1,234.56780. The filter can accept additional parameters, and the parameters are written after ":". For example, the
number
filter accepts numeric parameters to make a few decimal places to display.
Come on!
Angularjs Development Guide 13:ANGULARJS Filter detailed