Get all updates of Java4s
Follow Us: Email Newsletter

AngularJS Filters – Java4s

AngularJs » On Mar 8, 2016 { 3 Comments } By Sivateja

In Angularjs filters can be used to format the data, format means changing the text/data to upper/lower case or capitalize the first letter and showing the numbers in currency format and many more.

Generally we can use filters in two ways..

  • by adding to Expressions
  • by Adding to Directives

Here are few familiar inbuilt angular filters which will be using in day to day projects

  • uppercase > displays text in upper case
  • lowercase > displays text in lower case
  • currency > displays number in currency format
  • limitTo > displays limited number of characters
  • orderby > order the Array based on the given criteria or condition
  • filter > filter can filter the array by selecting subset of array items (hope you will not understand this point :-) but no worries, I will explain in detail in the example bellow)

We have few other inbuilt filters; you can check them in Angular Docs.

Note: Filters can be added by using the pipe symbol ( | ), followed by a filter name.

Adding  to Expressions

uppercase

uppercase > this will display text in upper case format.

Example:

Output:
Welcome to JAVA4S

lowercase

lowercase > this will display text in lower case format.

Example:

Output:
Welcome to java4s

currency

currency > this will display number in the currency format

Example:

Output:
Price is $7.00

limitTo

limitTo > displays limited number of characters

Example:

Output:
Name : Java

Adding  to Directives

orderby

orderby > order the Array based on the given criteria or condition

Example:

Output:

  • Kandula, Canada
  • Siva, India
  • Teja, United States

filter

filter > filter can filter the array based on the given criteria, I am taking the same example again…

Example:

Click here to check the demo.

  ♦ About Author ♦

Java4s_Author
sivateja@java4s.com
Full Stack( Java/J2EE & UI/UX ) Developer and founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog. Sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

3 Responses to “AngularJS Filters – Java4s”
  1. Swamy says:

    I got an idea after this explanation…thanks Sivateja Kandula……

  2. Pallavi says:

    Thanks for your easy explanation

  3. vijay says:

    Thank you

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
What would you like to learn today?
Browse these popular technologies
Hibernate spring struts Servlets ajax Log4j jQuery Json Core Java Web Services AngularJs
Most Recent Tutorials
Hibernate_Logo Hibernate Recent Posts Spring_Logo Spring Recent Posts Struts_Logo Struts Recent Posts
Useful Links Current & UpComing Tutorials
Upcoming
  Web Services [ SOAP ], JSP
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2016 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.