AngularJS Filters

AngularJS filters are powerful tools for transforming and formatting data displayed in the view. They allow you to manipulate data directly in your HTML templates without modifying the underlying data in the model.

This comprehensive guide will explain AngularJS filters, their syntax, and how to use them effectively. For more tutorials on AngularJS and other programming topics, visit The Coding College, your coding companion.

What Are Filters in AngularJS?

Filters in AngularJS format or transform data before displaying it in the view. They can be applied to expressions, directives, or services in AngularJS.

Syntax

Filters are applied using the pipe (|) symbol in AngularJS expressions.

{{ expression | filterName:parameter }}

• expression: The data to be filtered.
• filterName: The name of the filter (e.g., uppercase, currency).
• parameter: Optional parameter(s) passed to the filter.

Built-In Filters in AngularJS

AngularJS provides several built-in filters for common data manipulation tasks.

Examples of Using Filters

1. Currency Filter

<p>Price: {{ 99.99 | currency }}</p>

Output:
Price: $99.99

2. Date Filter

<p>Today's Date: {{ today | date:'fullDate' }}</p>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.today = new Date();
    });
</script>

Output:
Today's Date: Wednesday, December 19, 2024

3. Filter Array Items

<input type="text" ng-model="searchText" placeholder="Search items">
<ul>
    <li ng-repeat="item in items | filter:searchText">{{ item }}</li>
</ul>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.items = ['Apple', 'Banana', 'Cherry', 'Date'];
    });
</script>

Output:
Displays only the items matching the search input.

4. LimitTo Filter

<p>Top 3 Fruits: {{ fruits | limitTo:3 }}</p>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
    });
</script>

Output:
Top 3 Fruits: Apple,Banana,Cherry

5. OrderBy Filter

<ul>
    <li ng-repeat="student in students | orderBy:'name'">{{ student.name }} - {{ student.grade }}</li>
</ul>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.students = [
            { name: 'John', grade: 'A' },
            { name: 'Alice', grade: 'B' },
            { name: 'Bob', grade: 'C' }
        ];
    });
</script>

Output:

• Alice – B
• Bob – C
• John – A

Custom Filters

You can also create custom filters in AngularJS for specific needs.

Example: Reverse String Filter

<p>Reversed Text: {{ text | reverse }}</p>

<script>
    var app = angular.module('myApp', []);
    app.filter('reverse', function() {
        return function(input) {
            return input.split('').reverse().join('');
        };
    });
    app.controller('myCtrl', function($scope) {
        $scope.text = "AngularJS";
    });
</script>

Output:
Reversed Text: SJralugnA

Chaining Filters

You can chain multiple filters to apply several transformations.

<p>{{ message | uppercase | limitTo:5 }}</p>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.message = "angular";
    });
</script>

Output:
ANGUL

Best Practices for Filters

1. Keep Filters Lightweight
   Filters should be simple and fast to avoid performance issues.
2. Use Filters in the View
   Avoid using filters in controllers or services; they are meant for the view.
3. Avoid Excessive Chaining
   Too many filters can reduce readability and performance.

Conclusion

Filters in AngularJS are essential for formatting and transforming data dynamically. They simplify the presentation layer, making it easier to create clean and user-friendly interfaces.