AngularJS filter, angularjs

AngularJS filter, angularjs

I. Functions of filters

The filter is used to format the data to be presented to the user.

Use the | symbol to call the filter in the template binding symbol {} in HTML. For example, if you want to convert a string to uppercase, you can convert each character in the string separately, or use the filter: {name | uppercase }}

◇ Transmit parameters to the filter:

<H3> currency format

{123 | currency }}

<H3> decimal places </H3>

{123.3213132 | number: 2 }}

<H3> capital conversion </H3>

{'Tanzhenngqiang '| uppercase }}

<H3> lowercase conversion </H3>

{'Tanzhengqiang '| lowercase }}

 

◆ Number Filter format the number into text. Its second parameter is optional, used to control the number of digits after the decimal point.

If a non-numeric character is input, a null string is returned.

◆ You can use the | symbol as the delimiter to use multiple filters at the same time.

 

Ii. filter filters

You can select a subset from the given array and generate it into a new array. This filter is usually used to filter the elements to be displayed. For example, when performing a client search, you can immediately filter out the desired results from an array.

The first parameter of this filter can be a string, an object, or a function used to select elements from an array.

Example:

① Filter words that contain letters e

{['Ari ', 'lerner', 'likes ', 'to', 'eat', 'pizza'] | filter: 'E '}}

② Filter objects

{{[

{'Name': 'ari ',

'City': 'san Francisco ',

'Favorite food': 'pizza '},

{'Name': 'nate ',

'City': 'san Francisco ',

'Favorite food': 'indiance'

}] | Filter: {'favorite food': 'pizza '}}}

③ User-defined functions for filtering

◇ The isCapitalized function returns true or false based on whether the initial letter is capitalized.

$ Scope. isCapitalized = function (str ){

Return str [0] = str [0]. toUpperCase ();

};

Use a custom filter function

{['Ari ', 'likes', 'to', 'travel'] | filter: isCapitalized }}

<! -- ["Ari"] -->

We can also pass the second parameter to the filter to specify the way in which the expected value is compared with the actual value.

The second parameter can be one of the following three conditions.

◇ True

Use angular. equals (expected, actual) to strictly compare the two values.

◇ False

Compare case-sensitive substrings.

◇ Function

Run this function and accept this element if the return value is true.

 

★JSON Filter

The json filter can convert a JSON or JavaScript object into a string. This type of conversion is very helpful for debugging, for example:

{'Name': 'ari ', 'city': 'sanfrancisco'} | json }}

<! --

{

"Name": "Ari ",

"City": "San Francisco"

}

-->

★LimitTo filter (truncation string)

The limitTo filter generates a new array or string based on the input parameters. The length of the new array or string depends on the input parameters, pass in the positive and negative values of the parameter to control whether to intercept from the front or back.

If the input length value is greater than the length of the operated array or string, the entire array or string will be returned.

 

For example, we can intercept the first three characters of a string:

{San Francisco is very cloudy | limitTo: 3 }}

<! -- San -->

Or the last six characters:

{San Francisco is very cloudy | limitTo:-6 }}

<! -- Cloudy -->

You can also perform the same operation on arrays. Returns the first element of the array:

{['A', 'B', 'C', 'D', 'E', 'F'] | limitTo: 1 }}

<! -- ["A"] -->

 

★OrderBy Filter

The orderBy filter can use an expression to sort the specified array. OrderBy can accept two parameters. The first parameter is required, and the second parameter is optional. The first parameter is the predicate used to determine the sorting direction of the array.

The following describes the type of the first parameter.

L Function

When the first parameter is a function, the function is treated as the getter method of the object to be sorted.

L string

The result of parsing this string determines the sorting direction of the array elements. You can input + or-to force the ascending or descending order.

L Array

Use array elements as predicates in the SORT expression. Use the first predicate for each element that is not strictly equal to the expression result.

 

The second parameter is used to control the direction of sorting (whether to reverse ).

{{[{

'Name': 'ari ',

'Status': 'awak'

},{

'Name': 'Q ',

'Status': 'sleeping'

},{

'Name': 'nate ',

'Status': 'awak'

}] | OrderBy: 'name '}}

Result:

[

{"Name": "Ari", "status": "awake "},

{"Name": "Nate", "status": "awake "},

{"Name": "Q", "status": "sleeping "}

]

You can also reverse the sorting result. For example, you can reverse the sorting result by setting the second parameter to true:

{{[{

'Name': 'ari ',

'Status': 'awak'

},{

'Name': 'Q ',

'Status': 'sleeping'

},{

'Name': 'nate ',

'Status': 'awak'

}] | OrderBy: 'name': true }}

 

3. Custom Filters

To create a custom filter, you need to put it in your own module.

◇ Implement a filter to convert the first letter of the string to uppercase.

A filter is essentially a function that uses the input content as a parameter. In the above example, we simply treat input as a string when calling a filter. You can perform some error checks in this function:

Angular. module ('myapp. filters ', []). filter ('capitalize ',Function(){

Returnfunction(Input ){

// Input is the input string

If(Input ){

ReturnInput [0]. toUpperCase () + input. slice (1 );

}

 

};

});

Now, if you want to convert the first letter of a sentence into a large write form, you can use a filter to convert the entire sentence into a small one.

Write, and then convert the first letter to uppercase:

<! -- Ginger loves dog treats -->

{'Ginger loves dog treats '| lowercase | capitalize }}