AngularJS Filters

---

Filters can be added in AngularJS to format data.

---

AngularJS Filters

AngularJS provides filters to transform data:

• currency – Format a number to a currency format.
• date – Format a date to a specified format.
• filter – Select a subset of items from an array.
• json – Format an object to a JSON string.
• limitTo – Limits an array/string to a specified number of elements/characters.
• lowercase – Format a string to lower case.
• number – Format a number to a string.
• orderBy – Orders an array by an expression.
• uppercase – Format a string to upper case.

---

Adding Filters to Expressions

Filters can be added to expressions by using the pipe character |, followed by a filter.

For example, the uppercase filter converts strings to upper case:

{{ name | uppercase }}

Output :

---

The lowercase filter format strings to lower case:

Output :

---

Adding Filters to Directives

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

Output :

---

The currency Filter

The currency filter formats a number as currency:

The filter filter can only be used on arrays, and it returns an array containing only the matching items.

Output :

---

Filter an Array Based on User Input

By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter.
Type a letter in the input field, and the list will shrink/grow depending on the match:

Output :