Detailed description of filter usage in AngularJS

This article mainly introduces AngularJS's filter usage, including its common application scenarios in templates and in controller and service. If you need a friend, you can refer to the system to learn about angularjs, it is found that some ideas of angularjs are similar to the php module smarty, such as data binding and filter. If you are familiar with smarty, learning angularjs is easier. The filter function of angularjs can be divided into two types: built-in filter and custom filter.

1. built-in filters
1, uppercase, lowercase size conversion

{"Lower cap string" | uppercase} // result: lower cap string {"TANK is GOOD" | lowercase} // result: tank is good

| The vertical line here is a pipeline function. If you are familiar with linux, this line is used. | the Pipeline Function of the root linux is basically the same.
2. json format

{Foo: "bar", baz: 23} | json} // result: {"foo": "bar", "baz": 23}

Note: bza is not formatted with double quotation marks. After formatting, it is converted into json data.
3, date Format

{1304375948024 | date }}// result: May 3, 2011 {1304375948024 | date: "MM/dd/yyyy @ h: mma" }}// result: 05/03/2011 @ 06:39:08 AM {1304375948024 | date: "yyyy-MM-dd hh: mm: ss"} // result:

4. number formatting

{1.234567 | number: 1 }}// result: 1.2 {1234567 | number} // result: 1,234,567

5. Format currency

{250 | currency }}// result: $250.00 {250 | currency: "RMB ￥" }}// result: RMB ￥250.00

6. filter search

{[{"Age": 20, "id": 10, "name": "iphone" },{ "age": 12, "id": 11, "name": "sunm xing" },{ "age": 44, "id": 12, "name": "test abc"}] | filter: 'S '} // find the row containing s // result of the preceding example: [{"age": 12, "id": 11, "name ": "sunm xing" },{ "age": 44, "id": 12, "name": "test abc"}] {[{"age": 20, "id": 10, "name": "iphone" },{ "age": 12, "id": 11, "name": "sunm xing "}, {"age": 44, "id": 12, "name": "test abc"}] | filter: {'name ': 'iphone '}}// find the row whose name is iphone // result of the previous example: [{"age": 20, "id": 10, "name ": "iphone"}]

7, limitTo string, screenshot of the image

{"I love tank" | limitTo: 6} // result: I love {"I love tank" | limitTo:-4} // result: tank {[{"age": 20, "id": 10, "name": "iphone" },{ "age": 12, "id": 11, "name": "sunm xing" },{ "age": 44, "id": 12, "name": "test abc"}] | limitTo: 1 }}// result: [{"age": 20, "id": 10, "name": "iphone"}]

8. Order

{[{"Age": 20, "id": 10, "name": "iphone" },{ "age": 12, "id": 11, "name": "sunm xing" },{ "age": 44, "id": 12, "name": "test abc"}] | orderBy: 'id ': true }}// sort the root id in descending order {[{"age": 20, "id": 10, "name": "iphone" },{ "age ": 12, "id": 11, "name": "sunm xing" },{ "age": 44, "id": 12, "name ": "test abc"}] | orderBy: 'id'} // sort by id in ascending order

Ii. Custom filter Function
I found a mvc Framework of angularjs, phonecat, and custom filter, which is also written on this basis. This framework is quite useful.
1. Add a module to filters. js.

angular.module('tanktest', []).filter('tankreplace', function() {  return function(input) {    return input.replace(/tank/, "=====")  };});

2. Load the module in app. js.

var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers', 'facebookControllers', 'tanktest']);

3, called in html

{"TANK is GOOD" | lowercase | tankreplace} // result: ==== is good

Note: | lowercase | the tankreplace pipeline command can have multiple

3. Two filter methods
1. Use filter in the template
We can use filter directly in {} and use | to separate the filter following the expression. The syntax is as follows:

{{ expression | filter }}

You can also use multiple filters. The output of the previous filter will be used as the input of the next filter (no wonder this cargo length is like a pipeline ..)

{{ expression | filter1 | filter2 | ... }}

Filter can receive parameters, which are separated:

{{ expression | filter:argument1:argument2:... }}

In addition to formatting the data in {}, we can also use filter in the command. For example, we can filter the array and then recycle the output:

2. Use filter in controller and service
Filters can also be used in our js Code. The method is our familiar dependency injection. For example, to use the currency filter in the controller, just inject it into the controller. The Code is as follows:

app.controller('testC',function($scope,currencyFilter){  $scope.num = currencyFilter(123534);}

Use {num} in the template to directly output $123,534.00! The same applies to services using filters.

At this point, you may wonder, if I want to use multiple filters in the controller, do I have to inject them one by one? Do not worry ~ Ng provides a $ filter service to call the required filter. You only need to inject a $ filter. The usage is as follows:

app.controller('testC',function($scope,$filter){  $scope.num = $filter('currency')(123534);　　$scope.date = $filter('date')(new Date());}

The same effect can be achieved. The advantage is that you can easily use different filters.

For more details about how to use filter in AngularJS, please follow the PHP Chinese site!