A detailed explanation of filter usage in Angularjs _angularjs

System of learning a bit angularjs, found angularjs some of the ideas of the root of the PHP module Smarty very much like, for example, data binding, filter. If you are more familiar with smarty, it will be easier to learn angularjs. This article simply say Angularjs filter function, ANGULARJS filter function can be divided into two kinds, one is the built-in filter, one is custom.

One, built-in filter
1,uppercase,lowercase size Conversion

{{' Lower cap string ' | uppercase}}   Result: LOWER CAP STRING 
{{"TANK is good" | lowercase}}     //results: TANK is good

The vertical line here is a pipe function, if you are familiar with Linux, this piece of the | root Linux pipeline function, the basic is the same
2,json Format

{{{foo: ' Bar ', baz:23} | json}}  Result: {"foo": "Bar", "Baz": 23} 

Note: The BZA has no double quotes before formatting and is converted to JSON data after formatting.
3,date Format

{{1304375948024 | date}}             Result: May 3 { 
1304375948024 | date: "MM/DD/YYYY @ H:mma"}}   //results: 05/03/2011 @ 6:39am 
{{1304375948024 | d Ate: "Yyyy-mm-dd hh:mm:ss"}  //results: 2011-05-03 06:39:08 

4,number format

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

5,currency Currency format

{{currency}}}         Result: $250.00 
{{| currency: "Rmb￥"}}    //Result: rmb￥250.00 

6,filter Find

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "," id ":", "name": "Test ABC"} 
] | Filter: ' s '}  //Find rows containing S/ 
 
//Previous results: [{"Age": "id": one, "name": "Sunm Xing"},{"Age": "," id ":" A, "name": "Test ABC '}] 
 
{{{' age ': "id": Ten, "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "12" , "name": "Test ABC"} 
] | filter:{' name ': ' iphone '}}///  Find the name of the iphone line 
 
//Top case Result: [{"Age": "id": "Name": "iphone"}] 

7,limitto string, interception of the image

{{' I love Tank ' | limitto:6}}      Result: I love 
{{"I love Tank" | limitto:-4}}     //results: Tank 
 
{{[{"Age":], "id": "Name": "iphone"}, 
{"A GE ": ID": One, "name": "Sunm Xing"}, 
{"Age":, "id": A, "name": "Test ABC"} 
] | limitto:1}}   //Result: [{] Ag E ":" id ": Ten," Name ":" iphone "}] 

8,orderby sort of image

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "," id ":", "name": "Test ABC"} 
] | By: ' ID ': true}    ///root ID Descending row 
 
{{{' age ': ' id ': ' name ': ' iphone '}, {' Age ': ' id ': ', ' name ': ' 
sunm Xing "}, 
{" Age ":," id ": A," name ":" Test ABC "} 
] | | order: ' ID '}}      ///by ID ascending row 

Second, the custom filter function
I found a basic ANGULARJS MVC framework, Phonecat, and the custom filter is written on this basis, and the framework is pretty handy.
1,filters.js Add a module

Angular.module (' Tanktest ', []). Filter (' Tankreplace ', function () {return 
  function (input) { 
    return Input.replace (/tank/, "=====") 
  }; 
 

Load this module in 2,app.js

var Phonecatapp = angular.module (' Phonecatapp ', [ 
 ' Ngroute ', 
 ' phonecatcontrollers ', 
 ' Facebookcontrollers ', 
 ' tanktest ' 
]); 

Called in 3,html

{{' TANK is good ' | Lowercase |tankreplace}}  Result: ===== is good 

Note: | Lowercase |tankreplace Pipeline command can have multiple

Two ways of using filter
1. Using filter in the template
We can use filter directly in {{}}, following the expression with | Split, the syntax is as follows:

{{expression | filter}}

can also be used with multiple filter, the output of the last filter will be the input of the next filter (no wonder the cargo is the same as the pipe.) ）

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

Filter can receive parameters by: Split, as follows:

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

In addition to formatting the data in {{}}, we can also use filter in the instruction, such as filtering the array array first and then looping the output:

<span ng-repeat= "A in array | Filter ">

　2. Use of filter in controller and service
Our JS code can also use filters, the way we are familiar with dependency injection, such as I want 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 output $123,534.00 directly! The same is true of using filter in the service.

At this point you may have doubts, if I want to use multiple filter in the controller, is it not too strenuous to have an injection? Don't worry, little brother. ~ng provides a $filter service to invoke the desired filter, you just inject a $filter is enough, use the following method:

App.controller (' TESTC ', function ($scope, $filter) {
  $scope. num = $filter (' Currency ') (123534);
$scope. Date = $filter (' Date ') (new Date ()); 

can achieve the same effect. The advantage is that you can easily use a different filter.