Home » AngularJS Filters

AngularJS Filters

In AngularJS, filters are used to format data. Following is a list of filters used for transforming data.

Filter Description
Currency It formats a number to a currency format.
Date It formats a date to a specified format.
Filter It select a subset of items from an array.
Json It formats an object to a Json string.
Limit It is used to limit 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.

How to add filters to expressions

You can add filters to expressions by using the pipe character |, followed by a filter.

In this example, the uppercase filter format strings to upper case:

See this example:

Test it Now

Let's apply the lowercase filter into the same example:

See this example:

Test it Now


How to add filters to directives

Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter.

Let's take an example:

In this example, orderBy filter is used to sort an array.

See this example:

Test it Now


The filter Filter

The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items.

Let's take an example:

This example will return the names that contain the letter "o".

See this example:

Test it Now


Filter an array based on user input

You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field.

See this example:

Test it Now


Sort an array based on user input

You can sort an array according to the table columns.

See this example:

Test it Now


AngularJS Custom Filters

You can create your own filters by register a new filter factory function with your module.

See this example:

Test it Now

You may also like