Angularjs Filters other than date

Source: Internet
Author: User

Note: This article is a reading note, not original!

1. Currency filter
The Currecy filter can format a numeric value as a currency format. Use {{123 | currency}} to convert 123
into a currency format.
The Currecy filter allows us to set the currency symbol ourselves. By default, the currency symbol for the region in which the client is located
However, you can also customize the currency symbol.


2. Filter Filters
The Filter filter can select a subset from the given array and generate a new array to return. This filter
often used to filter the elements that need to be displayed. For example, when doing a client search, you can immediately filter out the desired
the result.
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!
symbols.
• Object
Angularjs will compare the properties of the object being filtered with the property of the same name in this object, if the property value is a string
will determine if the string is included. 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 Francisco ',
' favorite food ': ' Pizza '
},{
' name ': ' Nate ',
' city ': ' San Francisco ',
' Favorite food ' : ' Indian food '
}] | filter:{' favorite food ': ' Pizza ' }}
<!--[{"Name": "Ari", "City": "SanFrancisco", "Favoritefood": "Pizza"}]-
You can also use a custom function to filter (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.


3. JSON filter
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"
}
-


4. LimitTo Filter
The limitto filter generates a new array or string based on the parameters passed in, and the length of the new array or string takes
The incoming parameter is controlled by the positive negative value of the incoming parameter to control the interception from the front or from the back.
if the passed-in length value is greater than the length of the array or string being manipulated, the entire array or string will be
return.
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"] --



lowercase filter Converts a string to lowercase.

<!--San Francisco is very cloudy-->


6. Number Filter
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--


7. Filter by
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 an ascending
sequential or descending order.
• Arrays
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
with the first predicate.
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"}
]
-


8. Uppercase Filter
The uppercase filter can convert a string to uppercase:
{"San Francisco is very cloudy" | uppercase}}
<!--SAN FRANCISCO is VERY cloudy--

Angularjs Filters other than date

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.