Detailed description of AngularJS's filter usage, angularjsfilter

Detailed description of AngularJS's filter usage, angularjsfilter

After learning about angularjs, the system 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:

<span ng-repeat="a in array | filter ">

　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.

Articles you may be interested in:

• AngularJS Filter usage
• AngularJS Filter usage