Skip to content
Related Articles

Related Articles

AngularJS filter Filter

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

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=
    </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=
    </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=
    </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>


Output: 

 

Note: If you notice that the last Chinchwad in the array is not included in the list, because the last Chinchwad contains space before itself.

Reference: https://docs.angularjs.org/api/ng/filter/filter


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!