85

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