AngularJS | filter Filter

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:



  • 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.
  • comparator: It is used to determining the value by comparing the expected value from the filter expression, and the actual value from the object array.
  • anyPropertyKey: It is a special property that is used to match the value against given property. Its default value is $.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
        <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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS | filter Filter</title>
      
    <script src=
    </script>
</head>
  
<bod>
    <div ng-app="myApp" ng-controller="arrCtrl">
   
        <h1 style="color:green">GeeksforGeeks</h1>
   
        <ol>
            <li ng-repeat=
            "x in customers | filter :{'name' : 'e', 'city' : 'Patna'}">
                {{x.name + ", " + x.city}}
            </li>
        </ol>
    </div>
      
   
    <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>
   
    <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>
  
</body>
</html>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
          
        <ol>
            <li ng-repeat="x in customers | filter : 'Chinchwad' : true">
              {{x.name + ", " + x.city}}
            </li>
        </ol>
    </div>
   
    <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>
   
    <p>The filter will give a match for the array item(s) 
       where one or more object values are "Chinchwad".</p>
   
</body>
</html>                    

chevron_right


Output:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.