AngularJS filter usage _ AngularJS

Source: Internet
Author: User
Tags month name
This article describes how to use AngularJS filters in detail. Interested friends can refer to the filter of AnularJS to format the data to be presented to users, there are many practical built-in filters that can also be compiled by yourself.

Use the | symbol to call the filter in the template binding symbol {} in HTML. For example, suppose we want
To convert to uppercase, you can convert each character in the string separately, or use the filter:

{Name | uppercase }}
In JavaScript code, you can use $ filter to call the filter. For example, Use lowercase in JavaScript code
Filter:

app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) {$scope.name = $filter('lowercase')('Ari');}]);

When using a filter in HTML format, if you need to pass parameters to the filter, you only need to add a colon after the Filter Name
You can. If multiple parameters exist, you can add a colon to each parameter. For example, a numeric filter can limit the number of decimal places
The number of digits after the filter, write: 2 can be 2 as a parameter to the filter:

 {123.456789 | number: 2 }}

1. currency
The currecy filter can format a value as a currency. Use {123 | currency} to convert 123
Into the currency format.
The currecy filter allows us to set currency symbols by ourselves. By default, the currency symbol of the region where the client is located is used,
However, you can also customize currency symbols.
2. date
The date filter can format the date into the required format. AngularJS has several built-in date formats.
If any format is specified, the mediumDate format is used by default. This format is shown in the following example.
The following is a built-in date format that supports Localization:

{{ today | date:'medium' }} 
 {{ today | date:'short' }} 
 {{ today | date:'fullDate' }} 
 {{ today | date:'longDate' }} 
 {{ today | date:'mediumDate' }}
 {{ today | date:'shortDate' }} 
 {{ today | date:'mediumTime' }}
 {{ today | date:'shortTime' }} 
 

Year format
Four-digit year: {today | date: 'yyyy '}}
Two-digit year: {today | date: 'yy '}}
One-digit year: {today | date: 'y '}}
Month formatting
English month: {today | date: 'mmmm '}}
Abbreviated month name: {today | date: 'mmm '}}
Digit month: {today | date: 'mm '}}
Months of the year: {today | date: 'M '}}
Date formatting
Digit date: {today | date: 'dd '}}
Day of the month: {today | date: 'D '}}
English week: {today | date: 'eeeee '}}
Abbreviated weekly Abbreviation: {today | date: 'Eee '}}
Hour format
24-hour numeric hour: {today | date: 'hh '}}
The hour of the day: {today | date: 'H '}}
12-hour numeric hour: {today | date: 'hh '}}
Morning or afternoon hours: {today | date: 'H '}}
Minute format
Number in minutes: {today | date: 'mm '}}
Minutes in an hour: {today | date: 'M '}}
Format in seconds
Number of seconds: {today | date: 'ss '}}
The second in a minute: {today | date:'s '}}
Millisecond count: {today | date: '. ss '}}
The following are examples of custom date formats:

{{ today | date:'MMMd, y' }} 
 {{ today | date:'EEEE, d, M' }} 
 {{ today | date:'hh:mm:ss.sss' }} 
 

Filter

The filter can select a subset from a given array and generate a new array.

For example, you can use the following filter to select all words containing the letter e:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
 

To filter objects, you can use the object filter mentioned above. For example, if there is
Array, each object contains a list of their favorite foods, you can use the following form for filtering:

{{ [{'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza'},{'name': 'Nate','City': 'San Francisco','favorite food': 'indian food'}] | filter:{'favorite food': 'Pizza'} }}
 

You can also use a custom function to filter (in this example, the function is defined on $ scope ):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
 

The isCapitalized function returns true or false based on whether the first letter is capitalized, as shown below:

$scope.isCapitalized = function(str) {return str[0] == str[0].toUpperCase();};

Custom Filter

First, create a module for reference in the application.

Angular. module ('myapp. filters ', []). filter ('capitalize', function () {return function (input) {// input is the input string if (input) {return input [0]. toUpperCase () + input. slice (1 );}});

Now, if you want to convert the first letter of a sentence into a large write form, you can use a filter to convert the entire sentence into a small one.
Write, and then convert the first letter to uppercase:

 {{ 'ginger loves dog treats' | lowercase | capitalize }}

The above is how to use AngularJS filters and hope to help you learn them.

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.