Angularjs using filter conversion output (ANGULARJS series last article)

Using filters in a view template

A filter is also a service that handles the conversion of the input content to better display to the user.

The filter can be used in the {{}} tag in the template:

1. {{ expression | filter:arg1:arg2}}

• Pre-built filters

The Angularjs ng module implements some pre-set filters, such as currency, number, etc., which can be used directly. For example, the following example uses the currency filter for the number 12, and the result will be "$12.00":

1. {{| Currency}}

• Filter with parameters

Filters can also have parameters, for example, the following example formats a number as "1,234.00":

1. {{1234| Number:2}}

• Filter assembly line

Filters can be applied to the output of another filter, like pipelining, with the following syntax:

1. {{expression| Filter1| Filter2| ...}}

Example of using a filter (the first page of "Using Filter transformation Output" in http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/).

Using filters in your code

Don't forget that the filter is also a service, so you can inject it into your code.

Unlike the normal service, when the filter is registered in the injector, the name is appended with a suffix: filter. For example, the service name of the number filter is: Numberfilter, and the service name of the currency filter is: Currencyfilter.

Usually our code is encapsulated in three places: controllers, services, instructions. These places support direct injection of services, such as:

1. Angular. Module(' MyModule ', [])
2. . Controller(function($scope,numberfilter) {
3. //...
4. })

Sometimes you need to explicitly call the filter through the injector, then use the Invoke () method of the injector:

1. Angular. Injector([' ng '])
2. . Invoke(function(numberfilter) {
3. //...
4. })

In short, remember that a filter is a service, except that the name needs to append the filter suffix, and the invocation method of other services is no different.

Example (the "Use Filter conversion output" on the second page in http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/) injects the number and currency filters into the controller, The format of total is implemented.

Creating filters

Like directives, filters are also a special service, compared to creating a common service:

1. The service must be registered using the filter () interface of the module
2. Object Factory/factory method must be provided
3. Object engineering must return a filter function whose first argument is an input variable

2. Define Filter class factory
4. var filterfactory = function() {
6. //define Filter function
8. var filter = function(input,Extra_args) {
10. //process input and generate output
12. return output
14. }
16. };
18. Registering filters on the module
20. Angular. Module("Somemodule", [])
22. . Filter("FilterName",filterfactory);

Adding parameters to the filter

The behavior of the filter can be adjusted by additional parameters. For example, we want to refine the example in the previous section so that it can support only the first letter of each word in uppercase.

• Realize

This can be accomplished by passing in additional parameters in the filter function returned by the filter class factory.

1. var filter = function(input,argument1,argument2) {...}

• Use

When using filters, additional parameters are prefixed by: introduction, e.g.

1. {{expression| Filter:argument1:argument2}}

Reference: http://www.hubwiz.com

Angularjs using filter conversion output (ANGULARJS series last article)