Angularjs Development FAQs -2 (Angularjs built-in filter)

Source: Internet
Author: User

Several frequently used filter angular are built in to simplify our operations.

Filters use the ' | ' notation, which is somewhat similar to a pipeline in Linux.

1, filter (filtering)

Filter filters data according to conditions. Examples:

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

Results: [{"name":"coolcao","age":23}]
Here is the filter containing ' Coolcao ' objects, regardless of which attribute contains ' Coolcao ' can be.
Suppose you want to filter precisely, for example, only the name Coolcao can be used such as the following:

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

Note: The braces used by the filter object and the curly braces used for the Angularjs value are left with at least one space (that is, the last three curly braces, the third and the penultimate 1.) Leave at least one space before 22 curly braces. Otherwise ANGULARJS will parse the error);

2. Date: DateTime formatting

In the data that is returned in the system background. Time field, we may use a timestamp, long type. In the page display, it is definitely formatted as a string similar to ' 2012-12-12 12:12:12 '. Using the date filter, you can

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

Show Results:
2015-02-05 17:57:49
Note: The timestamp field of the long type is in milliseconds, assuming that the system is using the background in seconds. Then in angular, multiply by 1000 to convert to milliseconds. It's important to distinguish whether it's seconds or milliseconds.

3, Number: digital format

{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}} 

Results:

3.13.14-3.143.000.000.011001,0001,000.00

4. Arrange By order

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

Results:

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

The default is in ascending order, assuming reverse 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}}

Results:

[ { "name"coolcao", "age23 }, { "name"lily", "age22 }, { "name"tom", "age22 } ]

Note: The input is JS object (non-standard JSON), the output is a standard JSON string (the property name will be double-cited)

6, uppercase and lowercase conversions: uppercase,lowercase

{{‘abc‘ | uppercase}}

The output of the uppercase ABC
Note: Uppercase,lowercase can only filter conversions on strings

7, Currency: The format of the currency
Sometimes we need to display the numbers in the form of currency. Ability to format with currency

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

Show:

$1,000.00 RMB ¥1,000.00

8. Parsing backstage to the foreground
, NewLine issue module directive

 module.filter(‘trustHtml‘function ($sce) {        returnfunction (input) {            return$sce.trustAsHtml(input);        }    });

Front desk

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

Angularjs Development FAQs -2 (Angularjs built-in filter)

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