AngularJS | filter Filter - GeeksforGeeks

17 Jun, 2019
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:
<!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>          <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.
<!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>  <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>                    
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.
<!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>                  <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>                    
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.
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular File Upload
Auth Guards in Angular 9/10/11
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?