Home >Web Front-end >JS Tutorial >Detailed explanation of AngularJS's built-in filters_AngularJS

Detailed explanation of AngularJS's built-in filters_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:59:071232browse

Today we will learn about AngularJS’s built-in filters

Let’s take a look at how to use these built-in filters:

A filter without parameters
{{expression | filter}}

A filter with parameters
{{expression | filter:arguments}}

A filter with multiple parameters
{{expression | filter: arg1: arg2: ...}}

Multiple filters without parameters
{{expression | filter1 | filter2 | ...}}

Below we use the following built-in filters of AngularJS

currency

currency allows us to set our own currency symbol. By default, the currency symbol of the region where the client is located will be used.
It can be used like this: {{ 3600 | currency: "$¥"}}
The returned result is $¥123.00
Click to preview online code

number

The number filter formats numbers into text. Its parameter is optional and is used to control the number of digits after the decimal point.
If a non-numeric character is passed in, an empty string
will be returned. Can be used like this: {{ 3600 | number:2}}
The returned result is: 3,600.00
Click to preview online code

lowercase

lowercase converts the string to lowercase
Can be used like this: {{ "HEllo" | lowercase}}
The return result is: hello
Click to preview online code

uppercase

uppercase converts the string to uppercase
Can be used like this: {{ "HEllo" | uppercase}}
The return result is: HELLO
Click to preview online code

json

The json filter can convert a JSON or JavaScript object into a string.
This filter is quite useful for debugging
It can be used like this: {{ {"name":"dreampapple","language":"AngularJS"} | json}}
The return result is: { "name": "dreamapple", "language": "AngularJS" }
Click to preview online code

date

The date filter filters dates into the format you want. This is really a good filter.
There are many ways to use this filter. Here are a few commonly used ones
{{ today | date: "yyyy - mm - dd"}}
The result is: 2015-15-13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
The result is: 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 together in the next article

The above is the entire content of this article, I hope you all like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn