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.


Related articles: