Angularjs development FAQ-2 (angularjs built-in filter), angularjs-2

Source: Internet
Author: User

Angularjs development FAQ-2 (angularjs built-in filter), angularjs-2

Several Commonly Used filters are built in angular to simplify our operations.

The filter uses the '|' symbol, which is similar to the pipeline in linux.

1. filter)

Filter can filter data based on conditions, for example:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

Here is to filter the objects containing 'coolcao ', no matter which attribute contains 'coolcao.
For exact filtering, for example, if the name is coolcao, you can use the following:

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}

Note: There must be at least one space between the braces used by the filter object and the braces used by angularjs values (that is, at least one space before the last three braces and the last two braces, otherwise angularjs will parse the error );

2. date: format the date.

In the data returned in the system background, the time field may use the timestamp and Long type. It must be formatted as a string similar to '2017-12-12 12:12:12 'in the page display, use the date filter.

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

Display result:
Note: The Long-type Timestamp Field is in milliseconds. If the system background uses the unit of seconds, the angular value must be multiplied by 1000 to the unit of milliseconds. Here, we must determine whether it is a second or a millisecond.

3. number: number formatting

{{ 3.1415926 | number:1 }}{{ 3.1415926 | number:2 }}{{ -3.1415926 | number:2 }}{{ 3 | number:2 }}{{ 0.002 | number:2 }}{{ 0.009 | number:2 }}{{100 | number}}{{1000 | number}}{{1000 | number:2}}



4. orderBy Arrangement

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}



The default value is the ascending order. If you want to reverse the order:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

5. json format

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}


[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

Note: The input is a js object (non-standard json) and the output is a standard json string (Attribute names are enclosed in double quotation marks)

6. case-insensitive conversion: uppercase and lowercase

{{'abc' | uppercase}}

Uppercase ABC
Note: uppercase and lowercase can only filter and convert strings.

7. currency: format the currency
Sometimes we need to display numbers as currencies for easy display. You can use currency to format them.

{{1000 | currency }}{{1000 | currency:"RMB ¥" }}


$1,000.00 RMB ¥1,000.00

8, // The parsing background is uploaded to the foreground
, Line feed problem module command

 module.filter('trustHtml', function ($sce) {        return function (input) {            return $sce.trustAsHtml(input);        }    });


<article id="word-display4" ng-bind-html="outsPrintDetailList.strRowAllMoney | trustHtml"></article>

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Related Article

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: 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.