AANGULARJS Filter Detailed

(Refer to angular authoritative guide)

filter: used to format data that needs to be displayed to the user;

　　How to use filters:

(1) $scope. Name= $filter ("lowercase"). ("Ariarme");

(2) Use the filter in HTML: If you pass a parameter with a colon after the filter name, there are multiple parameters, you can add a colon after each parameter;

{{123.456789 | number:2}} limit the number of decimal places-----displayed as 123.46 (rounded)

(3) by | Symbols use multiple filters at the same time as delimiters;

built-in filters provided by Angularjs:

currency :　　　　　 formats A numeric value into currency format, converting 123 to currency format with {{123 | currency}};

It allows us to set the currency symbol ourselves: {{123 | currency: ' ￥ '}} is displayed as ￥123.00.00;

Date : dates can be formatted to the desired format;

Built-in support for localized date formats:

{{Today | date ' Medium '}} 09,2014 9:45:08 AM

{{Today | date ' short '}} 8/9/14 9:45am

{{Today | date ' Fulldate '}} Thursday,august 09,2014

{{Today | date ' Longdate '}} August 09,2014

{{Today | date ' Mediumdate '}} 09,2014

{{Today | date ' Shordate '}} 8/9/14

{{Today | date ' Mediumtime '}} 9:45:08 AM

{{Today | date ' Shorttime '}} 9:45 AM;

　　　　　　　　Year formatting:

Four-bit year: {{today | date ' yyyy '}} 2017

Two-bit year: {{today | date ' yy '}} 17

One year: {{today | date ' Y '}} 2017

Month Formatting:

English month: {{taday |date: ' MMMM '}} August

English month J abbreviation {{Taday |date: ' MMM '}}

Number month: {{taday |date: ' MM '}} 08

Month One month:: {{taday |date: ' M '}} 8

Date Formatting:

Numeric Date: {{today | date: ' DD '}} 22

Day of the one month: {{today | date: ' d '}} 22

English week: {{today | date: ' EEEE '}} thrusday

English week abbreviation: {today | date: ' EEE '}}thu

Hour formatting:

24-hour Digital hour: {{today | date: ' HH '}} 00

Hours of the day: {{today | date: ' H '}} 0

12-hour Digital hour: {{today | date: ' HH '}} 12

Hours of the morning or afternoon:: {{today | date: ' h '}} 12

Minute formatting:

　　　　　　　　Number of minutes: {{Today | date: ' mm '}} 05

One hours of the first minute: {{today | date: ' m '}} 5

Number of seconds to format:

Number of seconds: {{today | date ' ss '}} 09

Seconds in a minute: {{today | date '} 9

Milliseconds: {{today | date ' SSS '}}

Character formatting:

Last afternoon marked: {{today | date: ' A '}} AM

Four-bit time zone indication: {{today | date ' Z '}} 0700

Custom Date format:

{{Today | date: ' HH:MM:SS '} 23:15:40

{{Today | date: ' YYYY-MM-DD hh:mm:ss '} 2017-5-22 23:15:40

　　　　

Filter:　　　　　 You can select a subset from the given array and generate a new array to return, usually filtering the elements that need to be displayed;

Parameters: The first argument can be a string, an object, or a function to select an element from a number;

The second parameter is used to specify the way in which the actual value is expected to be compared;

The parameter is set to true: Angular.equals (expected,actual) is used to strictly compare two values;

parameter is set to false: case-sensitive substring comparisons;

parameter is set to function: Run this function and accept the element if it returns true;

　　　　　JSON: You can convert a JSON or JavaScript object into a string;

LimitTo: The filter generates a new array or string based on the parameters passed in, and the length of the new array or string depends on the parameters passed in, controlling the interception from the front or from the back by the positive or negative of the incoming parameters;

lowercase: The filter converts the string to lowercase;

　　　　　 Uppercase: The filter converts the string to uppercase;

　　　　　 Number: Formatting numbers into text, the second parameter is optional, to control the number of digits to intercept the decimal point, if the incoming non-numeric characters, will return an empty string;

{{123456789 | number}} 1,234,567,890

{{1.23456789 | number:2}} 1.23

　　　　　　ORDER BY: The filter can be used to sort the specified array with an expression, it accepts two parameters, the first one is necessary, the second is optional, controls the direction of the sort, the second parameter is set to true, and the sort is reversed;

For example: {{---| by: ' name ': true}}

Use + is ascending,-is descending; Order by: '-age ';

Custom filters:

Custom filter creation is very easy, in essence the city will take our input as parameters into the function;

The following: Angular.module (' Mainapp ', []). Filter (' Capitlize ', function () {

return function (Input) {

if (input) {

return input[0].touppercase () + input.slice (1);

}

}

}); Converts a letter of a string into an uppercase filter;

AANGULARJS Filter Detailed