How do filters work in AngularJS?

Steilla Mitchel 714 19 Jun 2024

1 Answers

Ashutosh Patel 19 Jun 2024

AngularJS Filters

Filters in AngularJS are used to set the value of an expression to be displayed to the user. They can be used in visual templates programmatically in the main syntax system ({{ word | filter:options }}) or in controllers and services.

Also, Read: How to display length of filtered ng-repeat data?

How Filters works

Here are few points that explains the working of filters in Angular application,

Usage in Templates-

Filters are applied to expressions in double curly braces ({{ }}) or directives such as ng-bind. Syntax

{{ expression | Filter:Options }} Example

<p>{{ dateValue | date:'yyyy-MM-dd' }}</p> This example has the word dateValue, the filter name date, and the filter parameters (options) 'yyyy-MM-dd'.

Chaining Filters

Filters can be chained using the pipe (|) symbol. Example

<p>{{ textValue | uppercase | limitTo:20 }}</p> Here, the textValue is first converted to uppercase (uppercase filter), then limited to 20 characters (limitTo filter).

Filtering Arrays Filters can also be used to filter an array based on specific criteria using filter.

Example-

<div ng-repeat="item in items | filter:searchText">
	 {{ item.name }}
</div>

In this example, objects are lists of items, and searchTextis a pattern bound to the input field. AngularJS will filter objects based on the searchText value.

Example-

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>ng-Root Scope</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body data-ng-controller="myController">
    <div class="container my-4">

        <!-- type to filter data -->
        <input data-ng-model="name" class="form-control" placeholder="Type to filter" />
        <!-- show when input data in text field -->
        <h4 data-ng-hide="!name" class="my-2">filtered data on "{{name}}"</h4>
        <table class="table my-2">
            <thead>
              <tr>
                <th scope="col">#</th>
                <!-- click on headers apply order by name and country -->
                <th data-ng-click="Order('name')" >Name</th>
                <th data-ng-click="Order('country')" scope="col">Country</th>
              </tr>
            </thead>
            <!-- bind the data from array with filter and orderBy -->
            <tbody data-ng-repeat="data in names | filter: name | orderBy : myOrder ">
              <tr>
                <th scope="row">{{$index + 1}}</th>
                <td data-ng-bind="data.name"></td>
                <td data-ng-bind="data.country"></td>
              </tr>
            </tbody>
          </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

    <script>
        angular.module("myApp", [])
        .controller("myController", ['$scope', function($scope){
            $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Carl',country:'Sweden'},
            {name:'Margareth',country:'England'},
            {name:'Hege',country:'Norway'},
            {name:'Joe',country:'Denmark'},
            {name:'Gustav',country:'Sweden'},
            {name:'Birgit',country:'Denmark'},
            {name:'Mary',country:'England'},
            {name:'Kai',country:'Norway'}
            ];
            // function to apply order by
            $scope.Order = function(text)
            {
                $scope.myOrder = text;
            }
        }]);
    </script>

</body>
</html>

Output-

Filters in AngularJS provide a powerful way to organize and manipulate data directly in templates or programmatically. They contribute to separation of concerns by allowing data transformation logic to be cached and reused in different parts of the application.

Also, Read: How orderBy multiple fields in Angular?

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How do filters work in AngularJS?

Can you answer this question?

1 Answers

AngularJS Filters

How Filters works