Newsletter

AngularJS Filters – Java4s

AngularJs » on Mar 8, 2016 { 4 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 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

4 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. Chandra says:

    Nice explanation… Thanks, Shiva.

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Hibernate Spring Struts
Contact | About Us | Privacy Policy | Advertise With Us

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