Detailed explanation of AngularJS filter usage, detailed explanation of angularjs Filter

Detailed explanation of AngularJS filter usage, detailed explanation of angularjs Filter

The filter of AnularJS is used to format the data to be presented to users. There are many practical built-in filters that can 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:

<! -- Display: 123.46 --> {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' }} <!-- Aug 09, 2013 12:09:02 PM -->{{ today | date:'short' }} <!-- 8/9/1312:09PM -->{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->{{ today | date:'longDate' }} <!-- August 09, 2013 -->{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->{{ today | date:'shortDate' }} <!-- 8/9/13 -->{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->{{ today | date:'shortTime' }} <!-- 12:09 PM -->

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

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

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' }}<!-- ["Lerner","Likes","Eat"] -->

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'} }}<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"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 }}<!-- ["Ari"] -->

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 -->{{ 'ginger loves dog treats' | lowercase | capitalize }}

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

Articles you may be interested in:

• Filter of AngularJS basic knowledge notes
• AngularJS built-in filter details
• Filter usage in AngularJS
• How to create a custom filter using AngularJS
• Detailed description of custom filters in AngularJS
• AngularJS Filter usage
• Detailed description of filter usage in AngularJS
• Angularjs filter