What is AngularJS Filters

AngularJS Filters are used to convert format or we can say transformation of data which is being displayed on the web page. There are various types of filters.

Few filters are listed below:

 

Currency

Sometimes we need that currency number should be displayed in currency format which falls under AngularJS application. The syntax is very easy. While using the expression, we can also provide currency filter so that information is displayed in correct format.

Cost: {{price | currency}}

 

Date

It changes the format of date in required form. Its syntax is provided below

{{date | date}}

{{date | date: format: timezone }}

 

Value Description
format Optional. The date format to display the date in, which can be one or more of the following:

“yyyy” year (2016)

“yy” year (16)

“y” year (2016)

“MMMM” month (January)

“MMM” month (Jan)

“MM” month (01)

“M” month (1)

“dd” day (06)

“d” day (6)

“EEEE” day (Tuesday)

“EEE” day (Tue)

“HH” hour, 00-23 (09)

“H” hour 0-23 (9)

“hh” hour in AM/PM, 00-12 (09)

“h” hour in AM/PM, 0-12 (9)

“mm” minute (05)

“m” minute (5)

“ss” second (05)

“s” second (5)

“sss” millisecond (035)

“a” (AM/PM)

“Z” timezone (from -1200 to +1200)

“ww” week (00-53)

“w” week (0-53)

“G” era (AD)

“GG” era (AD)

“GGG” era (AD)

“GGGG” era (Anno Domini)

 

The format value can also be one of the following predefined formats:

“short” same as “M/d/yy h:mm a” (1/5/16 9:05 AM)

“medium” same as “MMM d, y h:mm:ss a” (Jan 5, 2016 9:05:05 AM)

“shortDate” same as “M/d/yy” (1/5/16)

“mediumDate” same as “MMM d, y” (Jan 5, 2016)

“longDate” same as “MMMM d, y” (January 5, 2016)

“fullDate” same as “EEEE, MMMM d, y” (Tuesday, January 5, 2016)

“shortTime” same as “h:mm a” (9:05 AM)

“mediumTime” same as “h:mm:ss a” (9:05:05 AM)

timezone Optional. The timezone used to format the date.

 

Filter

It selects a subset of items from an array

ng-repeat=”x in students | filter : ‘ar’”

print {{ x }}

In the above example, students is a list of names of student. We can see that a filter is applied for considering only those students whose names have a substring as ‘ar’.

 

Rest of filters are as below:

 

Json : It formats an object to a JSON string

Limitto : It Limits an array/string, into a specified number of elements/characters.

Lowercase: It formats a string to lower case.

Number: It formats a number to a string.

Orderby: It orders an array by an expression.

Uppercase: It formats a string to upper case.

 

Be  Connected…

Satyendra Mishra

About Satyendra Mishra

Satyendra is a Technical Project Manager with 12+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (AngularJS) and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →