Detailed Angularjs the custom filter _angularjs

Filters (filter), as its name, function by receiving an input, processing it through a rule, and then returning the processed result. It is mainly used in the format of data, such as getting a subset of an array, sorting the elements in a group, and so on. NG has built-in filters that are: currency (currency), date (date), filter (substring match), JSON (formatted JSON object), LimitTo (limit), lowercase (lowercase), uppercase (uppercase), Number (numbers), by order (sort). Total nine species. In addition, you can customize the filter, this is powerful, can meet any requirements of data processing.

ANGULARJS provides us with some built-in filters, here are some examples of custom filters.

Custom filters with no parameters

Filter without parameter
app.filter (' ordinal ', function () {return
function (number) {
if (isNaN (number) | | Number < 1) { return number
;
} else {
var lastdigit = number%;
if (lastdigit = = 1) {return number
+ ' st '
} else if (lastdigit = = 2) {return number
+ ' nd '
} else if (Lastdigit = = 3) {return number
+ ' rd '
} else if (Lastdigit > 3) {return number
+ ' th '
}
   
    }
}
});
   

Use roughly this way:

{{777 | ordinal}}

Filter with parameters

Converts letters in a position to uppercase.

Filter with parameter
app.filter (' Capitalize ', function () {
//input need to filter the element
//char position, index minus one return
function (input, char) {if
(isNaN (input)) {
//If the ordinal position is not set, the index position defaults to 0
var char = Char-1 | | 0;
Converts the letters on the index position of the filter element to uppercase
var letter = Input.charat (char). toUpperCase ();
var out = [];
for (var i = 0; i < input.length. i++) {
if (i = = char) {
Out.push (letter);
} else {
Out.push (input [i]);
}
Return Out.join (");
} else {return
input;
}
}

Use roughly this way:

{{' Seven ' | capitalize:3}}

Filter Collection

Filters out elements in the collection that satisfy a certain condition.

var app = Angular.module (' Filters ', []);
App.controller (' demo ', function ($scope) {
$scope. languages = [
{name: ' C # ', type: ' Static '},
{name: ' PHP ', Type: ' Dynamic '},
{name: ' Go ', type: ' Static '},
{name: ' JavaScript ', type: ' Dynamic '},
{name: ' Rust ', type: ' Static '}
];
Filter set
app.filter (' Staticlanguage ', function () {return
function (input) {
var = [];
Angular.foreach (input, function (language) {
if (Language.type = = ' static ') {
out.push (language);
}
});
return out;
}

Use roughly this way:

<li ng-repeat= "Lang in Languages | Staticlanguage ">{{lang.name}}</li>

filter, with multiple parameters, do a lot of things

Defines the display unit and display position of a number.

var app = Angular.module (' Filters ', []);
App.controller (' demo ', function ($scope) {
$scope. digit = 29.88;
});
Filter multiple entries
app.filter (' customcurrency ', function () {return function (
input, symbol, place) {
if (isNaN) ( Input) {return
input;
} else {
//check symbol for argument
var symbol = Symbol | | ' ￥ ';
var place = Place = = undefined? True:place;
if (place===true) {return
symbol+input;
} else{return
input + symbol;}}

Use roughly this way:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul >
<p><strong>custom Currency filter</strong></p>
<ul>
<li> {{digit | customcurrency}}--default</li>
<li>{{digit | customcurrency: ' Yuan '}}--custom symbol</li >
<li>{{digit | customcurrency: ' Yuan ': false}}--Custom symbol and custom location</li>
</ul >

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.