AngularJS's built in filters in detail
- 2020-06-12 08:30:44
- OfStack
Today we'll take a look at AngularJS's built-in filters
Take a look at how these built-in filters work:
1 filter, no parameters case
{{expression | filter}}
1 filter, case with parameters
{{expression | filter:arguments}}
1 filter with multiple parameters
{{expression | filter: arg1: arg2: ...}}
Multiple filters with no parameters
{{expression | filter1 | filter2 | ...}}
Let's use the built-in filters of AngularJS below, respectively
currency
currency allows us to set our own currency symbol, which by default takes the currency symbol of the client's region.
You can use {{3600 | currency: "$¥"}}
The result is $123.00
online code Click Preview
number
The number filter formats the Numbers into text, and its parameters are optional to control the number of intercepts after the decimal point
If a non-numeric character is passed in, an empty string is returned
You can use: {{3600 | number:2}}
The returned result is: 3,600.00
online code Click Preview
lowercase
lowercase converts strings to lowercase
You can use: {{"HEllo" | lowercase}}
The return result is: hello
online code Click preview
uppercase
uppercase converts strings to uppercase
You can use {{"HEllo" | uppercase}}
The return result is: HELLO
Click Preview
json
The json filter converts an JSON or JavaScript object to a string.
This filter is quite useful for debugging
Use {{{"name":"dreamapple","language":"AngularJS"} | json}}
Return: {"name": "dreamapple", "language": "AngularJS"}
online code Click preview
date
The date filter filters the date into the format you want, which is a really good filter.
This filter can be used in a number of ways and I'll just list a few that are common
{{ today | date: "yyyy - mm - dd"}}
The results are: 2015-15-13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
The results were: 2015-18-13 20:18: 38
[online code](2015 - 18 - 13 20:18::38)
There are also three built-in filters, but they are a little more complicated to use. Let's discuss them in the next article
This is the end of this article, I hope you enjoy it.