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

 

THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *