Detailed Angularjs the use of filter _angularjs

Anularjs filters are used to format the data that needs to be displayed to the user, and there are a number of built-in filters that can be written on their own.

The filter is invoked within the template binding symbol {{}} in HTML through the | symbol. For example, suppose we want to have the string
Converted to uppercase, you can convert each character characters in a string individually or by using a filter:

{{name | uppercase}}
The filter can be invoked through $filter in JavaScript code. 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 as HTML, if you need to pass a parameter to the filter, just add a colon to the filter name
Can. If you have more than one argument, you can add a colon after each parameter. For example, a numeric filter can limit the number of decimal points
The number of digits, after the filter is written: 2 You can pass 2 as a parameter to the filter:

<!--display: 123.46-->
{123.456789 | number:2}}

1. Currency
The Currecy filter can format a numeric value in currency format. Use {{123 | currency}} to convert 123
into currency format.
The Currecy filter allows us to set the currency symbol ourselves. By default, the currency symbol for the area where the client is in is used.
However, you can also customize the currency symbol.
2. Date
Date filters can format dates into the desired format. Several date formats are built into the ANGULARJS, if not
Specifies that any format is used, and the mediumdate format is used by default, as shown in the following example.
The following is a built-in date format that supports localization:

{{Today | date: ' Medium '}} <!--Aug, 2013 12:09:02 PM-->
{today | date: ' Short '}} <!--8/9/1312:09pm-  ->
{Today | date: ' fulldate '} <!--Thursday, August, 2013--> {{Today
|: ' Longdate '}} <!-- August 2013--> {today
| date: ' mediumdate '}}<!--Aug-2013-->
{today |: ' ShortDate '}} <!--8/9/13-->
{today | date: ' mediumtime '}}<!--12:09:02 PM-->
{| date: ' Shorttime '}} ;! --12:09 PM-->

Year Format
Four-bit year: {today | date: ' YYYY '}} <!--2013-->
Two-bit year: {today | date: ' YY '}} <!---->
One year: {{today | date: ' Y '}} <!--2013-->
Month format
English Month: {{today | date: ' MMMM '}} <!--August-->
English month abbreviation: {{today | date: ' MMM '}} <!--Aug-->
Number month: {{today |date: ' MM '}} <!---->
The first months of the year: {{today |date: ' M '}} <!--8-->
Date Formatting
Number Date: {{today|date: ' DD '}} <!---->
Day of the one month: {{today | date: ' d '}} <!--9-->
English week: {{today | date: ' EEEE '}} <!--Thursday-->
English Week shorthand: {{today | date: ' EEE '}} <!--Thu-->
hour format
24-hour Digital hour: {{today|date: ' HH '}} <!--00-->
The first 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 '}} <!---->
First minutes of one hours: {{Today | date: ' m '}} <!--9-->
number of seconds formatted
Number of seconds: {{today | date: ' SS '}} <!---->
First seconds in a minute: {{today | date: ' s '} <!--2-->
Number of milliseconds: {{today |: '. SSS '}} <!--. 995-->
Here are some 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 filter can select a subset from a given array and generate a new array to return it.

For example, use the following filter to select all words that contain the letter e:

{[' Ari ', ' Lerner ', ' likes ', ' to ', ' Eat ', ' Pizza '] | filter: ' E '}}
<!--["Lerner", "likes", "Eat"]-->

If you want to filter objects, you can use the object filters mentioned above. For example, if you have a people object consisting of a
Array, each object contains a list of their favorite foods, and can be filtered in the following form:

{{
' 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 filter with a custom function (in this case the function is defined on the $scope):

{[' Ari ', ' likes ', ' to ', ' travel '] | filter:iscapitalized}}
<!--["Ari"]-->

The function of the iscapitalized function is to return TRUE or false based on whether the first letter is uppercase, as shown in the following example:

$scope. iscapitalized = function (str) {return
str[0] = = Str[0].touppercase ();
};

Custom Filters

First, create a module to refer to in the application

Angular.module (' myapp.filters ', [])
. Filter (' Capitalize ', function () {return
function (input) {
/ Input is our incoming string
if (input) {return
input[0].touppercase () + input.slice (1);
}
});

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

<!--Ginger loves dog treats-->
{' Ginger loves ' dog ' | treats | lowercase}}

The above is the use of ANGULARJS filter, I hope to help you learn.