Built-in filters provided by Angularjs

Source: Internet
Author: User

1. Currency
The Currecy filter can format a numeric value as a currency format. Use {{123 | currency}} to convert 123 to currency format.
The Currecy filter allows us to set the currency symbol ourselves. The currency symbol for the region in which the client is located is used by default, but you can also customize the currency symbol.
2. Date
The date filter formats the dates into the format you want. Several date formats are built into the ANGULARJS, and if no format is specified, the default is Mediumdate format, which is shown in the example below.
The following is a built-in support for localized date formats:

 {Today | date: ' Medium '}} <!--12:09:02 PM-->{{Today  | da TE: ' Short '}} <!--8/9/1312:09pm-->{{Today  | date: ' Fulldate '}} <!--  Thursday, August,-->{{Today  | date: ' Longdate '}} <!--August 09, 2013 -->{{Today  | date: ' mediumdate '}}<!--,-->{{Today  | date: ' shortdate '} <!--8/9/13-->{{Today  | Date: ' Mediumtime '}}<!--12:09:02 PM-->{{Today  | date: ' Shorttime '}} <!-- 12:09 PM--> 


? Year formatting
Four-bit year: {{today | date: ' YYYY '}} <!--
Two-bit year: {{today | date: ' YY '}} <!--
One year: {{today | date: ' Y '}} <!--
? Month formatting
English Month: {{today | date: ' MMMM '} <!--August--
Abbreviated English month: {today | date: ' MMM '} <!--
Number month: {{today |date: ' MM '} <!--
Month of the year: {{today |date: ' M '}} <!--8--
? Date formatting
Numeric Date: {{today|date: ' DD '}} <!----
Day of the one month: {{today | date: ' d '}} <!--9--
English week: {today | date: ' EEEE '} <!--Thursday--
English week abbreviation: {today | date: ' EEE '} <!--Thu--

? Hour formatting
24-hour Digital hours: {{today|date: ' HH '}} <!--00-->
Hours of the day: {{today|date: ' H '}} <!--0-->
12-hour Digital hours: {{today|date: ' hh '}} <!--12-->
Hours of the morning or afternoon: {{today|date: ' H '}} <!--12-->
? Minute formatting
Number of minutes: {{Today | date: ' mm '} <!----
Minutes in one hours: {{Today | date: ' m '}} <!--9--
? Number of seconds to format
Number of seconds: {{today | date: ' SS '}} <!--
Seconds in a minute: {{today | date: ' s '}} <!--2--
Milliseconds: {{today | date: '. SSS '}} <!--. 995--
? Character formatting
Last Afternoon ID: {{today | date: ' A '}} <!--AM--
Four-bit time zone ID: {{today | date: ' Z '}} <!---0700--
Here are some examples of custom date formats:
{{Today | date: ' MMMD, y '}} <!--Aug9,---
{Today | date: ' eeee, D, M '}} <!--Thursday, 9, 8-->
{{Today | date: ' HH:MM:SS.SSS '} <!--12:09:02.995--
3. Filter
The filter filter can select a subset from the given array and generate a new array to return. This filter is commonly used to filter the elements that need to be displayed. For example, when doing 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 to select an element from an array.
The following describes the different types of parameters passed in.
? String
Returns all elements that contain this string. If we want to return an element that does not contain the string, add it before the argument!
? Object
Angularjs will compare the properties of the object being filtered with the property of the same name in the object, and if the property value is a string, it will be judged to contain the string. If we want to compare all properties, we can use $ as the key name.

? Function
This function is executed for each element, and the element that returns a non-false value appears in the new array and returns.

For example, use the following filter to select all words that contain the letter e:
{{' Ari ', ' Lerner ', ' likes ', ' to ', ' Eat ', ' Pizza '] | filter: ' E '}}
<!--["Lerner", "likes", "Eat"]--
If you want to filter objects, you can use the object filters mentioned above. For example, if you have a people object that consists of a
Array, each object contains a list of their favorite foods, so you can filter them in the following form:

 {{[{ ' name ': ' Ari '  ' city ': ' San Fr Ancisco '  ' favorite food ': ' Pizza '  ' city ': ' San Francisco ' ,  ' Favorite food ': ' Indian food '  | filter:{' favorite food ': ' Pizza '  <!--[{' Name ': ' Ari ', ' City ': ' SanFrancisco "," Favoritefood ":" Pizza "}]--><!--can also be filtered with a custom function (in this case the function is defined on the $scope):-->{{[ ' Ari ', ' likes ', ' to ', ' travel ' |  Filter:iscapitalized}}  <!--["Ari"]--> 


The function of the iscapitalized function is to return TRUE or false based on whether the first letter is uppercase, as follows:
$scope. iscapitalized = function (str) {
return str[0] = = Str[0].touppercase ();
};
We can also pass a second parameter to the filter filter to specify how the expected value is compared to the actual value.
The second parameter can be one of the following three scenarios.
? True

Use Angular.equals (expected, actual) to make a strict comparison of two values.

? False
Makes case-sensitive substring comparisons.
? Function
Run this function and accept the element if it returns TRUE.
4. JSON
A JSON filter can convert a JSON or JavaScript object into a string. This conversion is very helpful for debugging:

{{' name ': ' Ari ', ' City ': ' SanFrancisco '} | JSON}} <!--{    "name": "Ari",    "City": "San Francisco"}--

5. LimitTo
The LimitTo filter generates a new array or string based on the parameters passed in, and the length of the new array or string depends on the parameters passed in, controlling whether to intercept from the front or from behind by passing in a positive negative value of the parameter. If the passed-in length value is greater than the length of the array or string being manipulated, then 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--and
Or the last six characters:
{{San Francisco is very cloudy | limitto:-6}}
<!--Cloudy--
An array can also do the same thing. Returns the first element of an array:
{{[' a ', ' B ', ' C ', ' d ', ' e ', ' F '] | limitto:1}}
<!--["a"]--
6. Lowercase
The lowercase filter converts the string to lowercase.
{"San Francisco is very cloudy" | lowercase}}
<!--San Francisco is very cloudy--

7. Number
The number filter formats numbers as text. Its second parameter is optional and is used to control the number of bits that are intercepted after the decimal point.
If a non-numeric character is passed in, an empty string is returned.
{{123456789 | number}}
<!--1,234,567,890--

{{1.234567 | number:2}}
<!--1.23--
8.
The order by filter can sort the specified array with an expression.
You can accept two parameters, the first one is required, and the second is optional.
The first parameter is a predicate that determines the direction in which the array is sorted.
The type of the first parameter is discussed in the following situation.
? Function
When the first argument is a function, the function is treated as a getter method for the object to be sorted.
? String
The result of parsing the string determines the sort direction of the array element. We can pass in + or-to force ascending or descending order.
? Array
Use an array element as a predicate in a sort expression. For each element that is not strictly equal to the result of an expression, the first predicate is used. The second parameter is used to control the direction of the sort (reverse).
For example, we sort the following object array with the Name field:

{{ [{
' Name ': ' Ari ',
' Status ': ' Awake '
},{
' Name ': ' Q ',
' Status ': ' Sleeping '
},{
' Name ': ' Nate ',
' Status ': ' Awake '
}] | By: ' Name '}}
<!--
[
{"Name": "Ari", "status": "Awake"},
{"Name": "Nate", "status": "Awake"},
{"Name": "Q", "status": "Sleeping"}
]
-
You can also reverse the sort results. For example, you can reverse the sort result by setting the second argument to true:
{{ [{
' Name ': ' Ari ',
' Status ': ' Awake '
},{
' Name ': ' Q ',
' Status ': ' Sleeping '
},{
' Name ': ' Nate ',

' Status ': ' Awake '
}] | By: ' Name ': true}}
<!--
[
{"Name": "Q", "status": "Sleeping"},
{"Name": "Nate", "status": "Awake"},
{"Name": "Ari", "status": "Awake"}
]
-
9. Uppercase
The uppercase filter can convert a string to uppercase:
{"San Francisco is very cloudy" | uppercase}}
<!--SAN FRANCISCO is VERY cloudy--

Built-in filters provided by Angularjs

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.