Filters in Angular JS

[Social9_Share type="horizontal"]

Filters in Angular JS

Lets discuss about the usage of filters in Angular JS

What are Filters?

Filters are basically used to format data in a required manner (for currency, dates etc). They also provide expressiveness to the application, by manipulating and transforming the data. There are few inbuilt filters which comes handy to transform the data. We can also create our own filters to provide our own data filtering requirement.

Inbuilt Filters

The filters in Angular JS are
  • currency
  • date
  • number
  • orderBy
  • lowercase
  • uppercase
  • limitTo
  • filter
  • json
  • Usage of filters with expressions

    To use filters, add the expression with a pipe character | and the filter

    Filters can be combined by creating a chain where the output of filter1 is the input of filter2


    Let us see the usage of filters with expression using examples
    Using filter : currency
    The text entered can formatted as Currency using currency filter .

    The first text is printed with $ and the second one is formatted and printed with Rs
    Using filter : date
    The text is formatted as date by date filter once value is selected . Has different combinations

    Using filter : number
    The text is formatted in a proper numerical format .


    Using filter : orderBy
    The text is formatted in alphabetical order or numerical order by orderBy filter.

    By using the above code snippet [A], the employee details are printed in alphabetical order of the name. Use '-name' to print the elements in reverse alphabetical order.
    Using filter : uppercase & lowercase
    The text gets formatted as uppercase using uppercase filter or lowercase using lowercase filter

    The name is printed in uppercase and the city is printed in lowercase

    Using filter : limitTo
    This filter limits the number of elements printed in a page. This can be applied to a string or an array.

    The text that the user enters will be limited to 8 and stored in uname

    By using the above code snippet [A], the number of employees printed is two and in alphabetical order of the name. You can also see that the filter chaining is happening here.

    Using filter : filter
    The list of objects are filtered by the choice typed by the user in the textfield using filter. The filter option should not be given within quotes. filter:choice .

    By using the above code snippet [A] , the employees are filtered in ng-repeat with the choice the user is entering in the text field.Here The cities will be filtered by users choice of city and then printed in alphabetical order in uppercase and city in lowercase

    Using filter : json
    To print the object in json format, use this filter .

    By using the above code snippet [A] , the employee details are printed in json format.
    Here is the a complete example depicting all the inbuilt filters.

    Thats all.
    To know about promises in Javascript, goto Promises in Javascript page.

    Happy Coding.


  1. Reply
    jagan says

    Please also explain what are promises and how to use them

Post a comment