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>