How to use a filter in a controller?

Revati S Misra 832 17 Jun 2024

1 Answers

Ashutosh Patel 18 Jun 2024

Filter in AngularJS

Using filters in AngularJS is a powerful way to format and change data displayed in views. Filters can be applied directly in templates to format the data without actually changing the underlying data.

AngularJS provides some built-in filters that you can use easily in your program,

Filter- Filters an array based on a predicate function or string.

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-ng-repeat="item in items | filter: searchText">
        <tr>
            <!-- bind the filtered data -->
            <td data-ng-bind="item.name"></td>
        </tr>
    </tbody>
</table>

Order By- Orders an array based on an expression.

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-ng-repeat="item in items | orderBy : propertyName">
        <tr>
            <!-- bind the ordered data -->
            <td data-ng-bind="item.name"></td>
        </tr>
    </tbody>
</table>

Example-

Here is an example of how to use filters in angular js program

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

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <!-- input field for filter data  -->
        <input type="text" data-ng-model="name" class="form-control col-4" placeholder="type to filter"/>
        <div>
            <h2 data-ng-hide="!name" class="my-2">Filtered data on "{{name}}"</h2>
            <table class="table my-2">
                <thead>
                    <tr>
                        <!-- the OrderBy() function for ordering data based on column-->
                        <th data-ng-click="OrderBy('$index')">#</th>
                        <th  data-ng-click="OrderBy('name')">Name</th>
                        <th  data-ng-click="OrderBy('country')">Country</th>
                    </tr>
                </thead>
                <!-- bind data using loop in table row -->
                 <!-- apply the built-in service filter with column name  -->
                  <!-- also apply the ordering based on column data when click on column name -->
                <tbody data-ng-repeat="name in names | filter: name | orderBy : myOrder">
                    <tr>
                        <!-- angular service $index use for serial number -->
                        <td data-ng-bind="$index+1"></td>
                        <td data-ng-bind="name.name"></td>
                        <td data-ng-bind="name.country"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        angular.module("myApp", [])
        // json data for apply filter
        .controller("MyController", 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 that orders the data dynamically
            $scope.OrderBy = function(data){
                $scope.myOrder = data;
            }
        });

    </script>

</body>
</html>

In the example above

A dummy json data taken in the $scope.names
bind the data into table in HTML template using ng-repead
apply the filter and orderBy filters during fetch data from json object and bind into HTML table body
$scope.OrderBy function respponsible for oders the data when click on column name in the HTML table on the View.

Output-