What are filters in AngularJS?

Filters in AngularJS are used to format data before displaying it in the UI. They help transform data within expressions, directives, or controllers without modifying the original data. Filters can be applied in templates using the pipe (|) symbol.

Topics Covered

What are Filters in AngularJS?
Syntax of Filters
Built-in Filters in AngularJS
Using Filters in Expressions
Using Filters in Directives (ng-repeat, etc.)
Creating Custom Filters
Complete Example with Multiple Filters
Conclusion

1. What are Filters in AngularJS?

Filters format and transform data in AngularJS applications.
They can be used in:
Expressions ({{ expression | filterName }})
Directives like ng-repeat (<li ng-repeat="item in list | filter:criteria">)
Controllers ($filter('filterName')(data))

2. Syntax of Filters

htmlCopyEdit{{ expression | filterName:argument }}

Multiple filters can be chained:

htmlCopyEdit{{ expression | filter1 | filter2 }}

3. Built-in Filters in AngularJS

AngularJS provides several built-in filters, including:

Filter Name	Usage
`currency`	Formats numbers as currency.
`date`	Formats a date/time value.
`uppercase`	Converts text to uppercase.
`lowercase`	Converts text to lowercase.
`filter`	Filters an array based on criteria.
`orderBy`	Sorts an array based on properties.
`number`	Formats numbers with decimal places.
`limitTo`	Limits the number of items in an array.

4. Using Filters in Expressions

Example: Formatting Text

<p>{{ "hello world" | uppercase }}</p>  <!-- Output: HELLO WORLD -->
<p>{{ "HELLO WORLD" | lowercase }}</p>  <!-- Output: hello world -->

Example: Formatting Numbers & Currency

<p>{{ 1500 | currency }}</p>  <!-- Output: $1,500.00 -->
<p>{{ 1500 | currency:'₹' }}</p>  <!-- Output: ₹1,500.00 -->

Example: Formatting Dates

<p>{{ '2025-03-25' | date:'fullDate' }}</p>  
<!-- Output: Tuesday, March 25, 2025 -->

5. Using Filters in Directives

Filters are commonly used with ng-repeat to search, filter, or sort data dynamically.

Example: Filtering a List

<input type="text" ng-model="searchText" placeholder="Search name">
<ul>
    <li ng-repeat="user in users | filter:searchText">
        {{ user.name }}
    </li>
</ul>

This filters the list based on the user’s input

Example: Sorting Data with `orderBy`

<ul>
    <li ng-repeat="user in users | orderBy:'age'">
        {{ user.name }} ({{ user.age }})
    </li>
</ul>

This sorts users by age in ascending order

6. Creating Custom Filters

Custom filters allow developers to create specific data transformations.

Example: Creating a Custom Filter to Capitalize Words

var app = angular.module('myApp', []);

app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.replace(/\b\w/g, function(letter) {
            return letter.toUpperCase();
        });
    };
});

Usage in HTML

<p>{{ "angular js filters" | capitalize }}</p>  <!-- Output: Angular Js Filters -->

Custom filters help format data as per project needs

7. Complete Example with Multiple Filters

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="UserController">

    <h2>AngularJS Filters Example</h2>

    <input type="text" ng-model="searchText" placeholder="Search by name">

    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Salary</th>
            <th>Date of Birth</th>
        </tr>
        <tr ng-repeat="user in users | filter:searchText | orderBy:'age'">
            <td>{{ user.name | capitalize }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.salary | currency:'₹' }}</td>
            <td>{{ user.dob | date:'mediumDate' }}</td>
        </tr>
    </table>

    <script>
        var app = angular.module('myApp', []);

        app.controller('UserController', function($scope) {
            $scope.users = [
                { name: 'john doe', age: 30, salary: 50000, dob: '1994-06-15' },
                { name: 'jane smith', age: 25, salary: 70000, dob: '1999-04-20' },
                { name: 'mark wright', age: 35, salary: 60000, dob: '1989-12-10' }
            ];
        });

        app.filter('capitalize', function() {
            return function(input) {
                if (!input) return '';
                return input.replace(/\b\w/g, function(letter) {
                    return letter.toUpperCase();
                });
            };
        });
    </script>

</body>
</html>

Filters Used: filter, orderBy, currency, date, and a custom capitalize filter