Filters in AngularJS (uppercase, lowercase, currency, etc.)

In AngularJS, filters are used to format the data displayed in the view. Filters can be applied to expressions, directives, or controllers to transform data before it is displayed in the user interface. AngularJS comes with several built-in filters that you can use to format strings, numbers, dates, and more.

Filters are commonly used to format text, modify dates, perform currency formatting, and manipulate arrays. Filters are easy to use and enhance the readability of your views.

1. Syntax of Filters in AngularJS

Filters are used by adding a pipe symbol (|) followed by the filter name and any additional parameters. For example:

{{ expression | filterName:parameter }}

2. Commonly Used Built-In Filters in AngularJS

Here are some commonly used AngularJS filters:

---

A. Uppercase Filter (uppercase)

The uppercase filter is used to convert the text to uppercase.

Syntax:

{{ expression | uppercase }}

Example:

<p>{{ 'hello world' | uppercase }}</p>

Output:

HELLO WORLD

In this example, the string 'hello world' is converted to uppercase and displayed as 'HELLO WORLD'.

---

B. Lowercase Filter (lowercase)

The lowercase filter converts the text to lowercase.

Syntax:

{{ expression | lowercase }}

Example:

<p>{{ 'HELLO WORLD' | lowercase }}</p>

Output:

hello world

In this example, the string 'HELLO WORLD' is converted to lowercase and displayed as 'hello world'.

---

C. Currency Filter (currency)

The currency filter formats a number as a currency value. By default, it uses the $ symbol, but you can also pass a currency symbol as a parameter.

Syntax:

{{ expression | currency:currencySymbol }}

Example:

<p>{{ 12345.678 | currency }}</p>

Output:

$12,345.68

In this example, the number 12345.678 is formatted as currency, and it is displayed as $12,345.68.

You can also specify a different currency symbol:

<p>{{ 12345.678 | currency:'€' }}</p>

Output:

€12,345.68

---

D. Date Filter (date)

The date filter formats a date into a readable string. It can format the date in a variety of formats like long, short, or custom formats.

Syntax:

{{ expression | date:format }}

Example (using default format):

<p>{{ '2025-03-24' | date }}</p>

Output:

Mar 24, 2025

Example (using a custom format):

<p>{{ '2025-03-24' | date:'fullDate' }}</p>

Output:

Monday, March 24, 2025

In this example, the date '2025-03-24' is formatted according to the fullDate format.

Common Date Formats:

• shortDate: 3/24/25
• mediumDate: Mar 24, 2025
• fullDate: Monday, March 24, 2025
• shortTime: 12:00 AM
• mediumTime: 12:00:00 AM

---

E. Number Filter (number)

The number filter formats a number as a string and allows you to specify the number of decimal places to display.

Syntax:

{{ expression | number:decimalPlaces }}

Example:

<p>{{ 12345.6789 | number:2 }}</p>

Output:

12,345.68

In this example, the number 12345.6789 is rounded to two decimal places and displayed as '12,345.68'.

---

F. JSON Filter (json)

The json filter formats an object or array as a JSON string. This can be useful for debugging or displaying raw data in the view.

Syntax:

{{ expression | json }}

Example:

<p>{{ user | json }}</p>

Output:

{"firstName":"John","lastName":"Doe","age":30}

In this example, the user object is converted to a JSON string and displayed.

---

G. Filter Filter (filter)

The filter filter is used to filter an array of objects or strings based on a specific condition. You can use it to display only certain elements that meet the criteria.

Syntax:

{{ expression | filter:filterCriteria }}

Example:

<ul>
    <li ng-repeat="user in users | filter:{age: 30}">{{ user.name }}</li>
</ul>

Here, the list will only display users whose age is 30.

Example (filtering a string list):

htmlCopyEdit<input ng-model="search">
<ul>
    <li ng-repeat="user in users | filter:search">{{ user.name }}</li>
</ul>

In this case, the list of users will be filtered based on what the user types in the search input box.

---

H. LimitTo Filter (limitTo)

The limitTo filter limits the number of items in an array or string to a specified number.

Syntax:

{{ expression | limitTo:limit }}

Example:

<p>{{ 'AngularJS is great!' | limitTo:7 }}</p>

Output:

Angular

Here, the string is limited to the first 7 characters.

Example (limiting the number of items in an array):

<ul>
    <li ng-repeat="user in users | limitTo:3">{{ user.name }}</li>
</ul>

In this case, the list will show only the first three users from the users array.

---

3. Creating Custom Filters in AngularJS

In addition to the built-in filters, you can also create custom filters in AngularJS. To create a custom filter, you can use the filter service in the module.

Example:

app.filter('reverse', function() {
    return function(input) {
        if (input) {
            return input.split('').reverse().join('');
        }
        return input;
    };
});

You can then use this custom filter in the view:

<p>{{ 'AngularJS' | reverse }}</p>

Output:

SJralugnA

This custom filter reverses the input string.