forum

Home / DeveloperSection / Forums / How to use a filter in a controller?

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

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- 

answer 6518921806062412

 

By using filters in AngularJS templates you can keep your visual logic clean and readable while providing powerful data transformation capabilities.

 

Also, Read: If else statement in AngularJS.

MindStick Training

Liked By