AngularJS filter Filter

Last Updated : 01 Aug, 2022

The "filter" Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array.

Syntax:

{{arrayexpression | filter: expression : comparator : anyPropertyKey}}

Parameter Values:

arrayexpression: The source array on which the filter will be applied.
expression: It is used to select the items from the array after the filter conditions are met. It can be of String type, Function type, or Object type.
comparator: It is used to determine the value by comparing the expected value from the filter expression, and the actual value from the object array.
anyPropertyKey: It is an optional parameter having the special property that is used to match the value against the given property. It is of String type & its default value is $.

Example 1: This example describes the AngularJS filter Filter by filtering & rendering the name only having the character "e" in the name.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS filter Filter</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="myApp" 
         ng-controller="namesCtrl">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>AngularJS filter Filter</h3>
        <ol> 
            <strong>
                <li ng-repeat="x in names | filter : 'e'">
                    {{ x }}
                </li>
            </strong> 
        </ol>
    </div>
    <script>
        angular.module('myApp', [])
              .controller('namesCtrl', function($scope) {
            $scope.names = [
                  'Jani', 'Carl', 'Margareth', 
                'Hege Mathew', 'Joey Tribiani',
                'Gustav', 'Birgit', 'Mary', 'Kai'
            ];
        });
    </script>
    <p>
        This example displays the names containing the
        character "e"(filter) 
    </p>
</body>
</html>

Output:

Example 2: This example uses an object to filter its element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS filter Filter
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="myApp" ng-controller="arrCtrl">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>
            AngularJS filter Filter
        </h3>
        <ol>
            <li ng-repeat=
"x in customers | filter :{'name' : 'e', 'city' : 'Patna'}">
                {{x.name + ", " + x.city}}
            </li>
        </ol>
    </div>

    <p>
        The filter will give a match if there is an
        "e" character in the name, and the city is
        "Patna". Milk wasn't matched because the alphabet
        'e' is not present.
    </p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('arrCtrl', function ($scope) {
            $scope.customers = [{
                "name": "Chocolate Shake",
                "city": "Patna"
            }, {
                "name": "Hot Chocolate",
                "city": "Delhi"
            }, {
                "name": "Milk",
                "city": "Patna"
            }, {
                "name": "Coffee",
                "city": "Patna"
            }, {
                "name": "Tea",
                "city": "Pune"
            }, {
                "name": "Mineral Water",
                "city": "Mumbai"
            }, {
                "name": "Iced Tea",
                "city": "Bangalore"
            }];
        });
    </script>
</body>

</html>

Output:

Example 3: In this example, we are going to see a "strict" caparison that does not return any value unless it is a pure match.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS filter Filter
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="myApp" 
         ng-controller="arrCtrl">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>
            AngularJS filter Filter
        </h3>
        <ol>
            <li ng-repeat=
        "x in customers | filter : 'Chinchwad' : true"> 
            {{x.name + ", " + x.city}} 
            </li>
        </ol>
    </div>
  
      <p>
        The filter will give a match for the array
        item(s) where one or more object values are
        "Chinchwad".
    </p>
  
    <script>
        var app = angular.module('myApp', []);
        app.controller('arrCtrl', function($scope) {
            $scope.customers = [{
                "name": "Mumbai Food",
                "city": "Chinchwad"
            }, {
                "name": "Gurgaon Catering",
                "city": "Haryana City"
            }, {
                "name": "Noida temperature",
                "city": " Chinchwad"
            }, ];
        });
    </script>
</body>
</html>