AngularJS Filters

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

FilterDescription
CurrencyIt formats a number to a currency format.
DateIt formats a date to a specified format.
FilterIt select a subset of items from an array.
JsonIt formats an object to a Json string.
LimitIt is used to limit an array/string, into a specified number of elements/characters.
LowercaseIt formats a string to lower case.
NumberIt formats a number to a string.
OrderbyIt orders an array by an expression.
UppercaseIt 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



Latest Courses