Post
Ask Question

Search Filter In Angular

In this article, I'll explain how to use a Search Filter in AngularJS.

First, let's take a look at the code below.
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">  
  6.         </script>  
  7.         <title></title>  
  8.         <meta charset="utf-8" /> </head>  
  9.   
  10. <body>  
  11.     <div ng-controller="MyCtrl"> <input type="text" placeholder="Enter the name of student" ng-model="Search" /> <br /><br />  
  12.         <table border="1">  
  13.             <tr>  
  14.                 <th>Name</th>  
  15.                 <th>Gender</th>  
  16.                 <th>City</th>  
  17.             </tr>  
  18.             <tr ng-repeat="student in Students| filter:Search">  
  19.                 <td>{{student.name}}</td>  
  20.                 <td>{{student.Gender}}</td>  
  21.                 <td>{{student.City}}</td>  
  22.             </tr>  
  23.         </table>  
  24.     </div>  
  25.     <script>  
  26.         var app = angular.module("myApp", []);  
  27.         app.controller("MyCtrl", function($scope) {  
  28.             $scope.Students = [{  
  29.                 name: "Rohit",  
  30.                 Gender: "Male",  
  31.                 City: "Gurugram"  
  32.             }, {  
  33.                 name: "Akshay",  
  34.                 Gender: "Male",  
  35.                 City: "Delhi"  
  36.             }, {  
  37.                 name: "Ananya",  
  38.                 Gender: "Female",  
  39.                 City: "Noida"  
  40.             }, {  
  41.                 name: "Mehak",  
  42.                 Gender: "Female",  
  43.                 City: "Faridabaad"  
  44.             }, {  
  45.                 name: "Rahul",  
  46.                 Gender: "Male",  
  47.                 City: "Gurugram"  
  48.             }, {  
  49.                 name: "Jyoti",  
  50.                 Gender: "Female",  
  51.                 City: "Panipat"  
  52.             }, ];  
  53.         });  
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  
Output

Explanation of the above code

Whenever we type anything in the text box, the search will be done across all columns. If we want to perform the same search functionality on any specific column, then simply do that like this.
  1. <input type="text" placeholder="Enter the name of student" ng-model="Search.City" />  
Now, the search will be done checking all the students' cities.