Get all updates of Java4s
Newsletter

AngularJS Filters – Java4s

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 the Author ♦

Java4s_Author
- Full Stack Java/J2EE & UI Web Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can 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

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
What would you like to learn today?
Browse these popular technologies
Spring-Boot-tutorials Hibernate tutorials Spring tutorials Struts tutorials Servlets tutorials Ajax tutorials Log4j tutorials jQuery tutorials Json tutorials Core Java tutorials Web Services tutorials AngularJs tutorials
Most Recent Tutorials
Hibernate_Logo Hibernate Recent Posts Spring_Logo Spring Recent Posts Struts_Logo Struts Recent Posts
Contact | About Us | Privacy Policy | Advertise With Us

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