Search Filter

Search filter is used to implement search column wise or entire row

Click here to see the output

HTML Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController">  
     <style type="text/css">  
       table, td, th {  
         border-collapse: collapse;  
         border: 1px solid red;  
         padding: 5px;  
         font-family: Calibri;  
       }  
     </style>  
     <h1>{{Title}}</h1>  
     <hr />  
     <h3>Search All Columns</h3>  
     Enter search text : <input type="text" ng-model="SearchText" />  
     <br /><br />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Gender</th>  
         <th>Age</th>  
         <th>Salary</th>  
         <th>RegDate</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray | filter : SearchText">  
         <td>{{x.Name | lowercase}}</td>  
         <td>{{x.LastName | uppercase}}</td>  
         <td>{{x.Gender}}</td>  
         <td>{{x.Age | number:2}}</td>  
         <td>{{x.Salary | currency:"₹ ":1}}</td>  
         <td>{{x.RegDate | date:"yyyy/M/dd"}}</td>  
       </tr>  
     </table>  
     <hr />  
     <h3>Search by first name</h3>  
     Enter search text : <input type="text" ng-model="SearchText2.Name" />  
     <br /><br />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Gender</th>  
         <th>Age</th>  
         <th>Salary</th>  
         <th>RegDate</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray2 | filter : SearchText2">  
         <td>{{x.Name | lowercase}}</td>  
         <td>{{x.LastName | uppercase}}</td>  
         <td>{{x.Gender}}</td>  
         <td>{{x.Age | number:2}}</td>  
         <td>{{x.Salary | currency:"₹ ":1}}</td>  
         <td>{{x.RegDate | date:"yyyy/M/dd"}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  
 <script src="index.js"></script>  

AngularJS Code

 /// <reference path="angular.1.4.8.min.js" />  
 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope) {  
   $scope.Title = "SEARCH FILTER";  
   var TempArray = [{ Name: "John", LastName: "Doe", Gender: "Male", Age: 45, Salary : "45210.265", RegDate: new Date("October 10 1987") },  
           { Name: "Jennifer", LastName: "Dolle", Gender: "Female", Age: 12, Salary: "12000", RegDate: new Date("January 13 2010") },  
           { Name: "Theon", LastName: "GreyJoy", Gender: "Male", Age: 32, Salary: "45628.321", RegDate: new Date("March 20 2011") },  
           { Name: "Cersei", LastName: "Lannistor", Gender: "Female", Age: 15, Salary: "500", RegDate: new Date("April 23 2006") },  
           { Name: "Rohini", LastName: "Devikar", Gender: "Female", Age: 20, Salary: "78000", RegDate: new Date("July 29 2005") },  
           { Name: "Amit", LastName: "Shah", Gender: "Male", Age: 57, Salary: "106000", RegDate: new Date("December 5 1978") },  
           { Name: "Narendra", LastName: "Modi", Gender: "Male", Age: 64, Salary: "1", RegDate: new Date("September 9 2015") }];  
   var TempArray2 = [{ Name: "John", LastName: "Doe", Gender: "Male", Age: 45, Salary: "45210.265", RegDate: new Date("October 10 1987") },  
           { Name: "Jennifer", LastName: "Dolle", Gender: "Female", Age: 12, Salary: "12000", RegDate: new Date("January 13 2010") },  
           { Name: "Theon", LastName: "GreyJoy", Gender: "Male", Age: 32, Salary: "45628.321", RegDate: new Date("March 20 2011") },  
           { Name: "Cersei", LastName: "Lannistor", Gender: "Female", Age: 15, Salary: "500", RegDate: new Date("April 23 2006") },  
           { Name: "Rohini", LastName: "Devikar", Gender: "Female", Age: 20, Salary: "78000", RegDate: new Date("July 29 2005") },  
           { Name: "Amit", LastName: "Shah", Gender: "Male", Age: 57, Salary: "106000", RegDate: new Date("December 5 1978") },  
           { Name: "Narendra", LastName: "Modi", Gender: "Male", Age: 64, Salary: "1", RegDate: new Date("September 9 2015") }];  
   $scope.DetailArray = TempArray;  
   $scope.DetailArray2 = TempArray2;  
 });  

Click here to see the output