How to Search and Filter in AngularJS

Code for search
  1. <div class="navbar-form" role="search">  
  2.     <div class="input-group add-on">  
  3.         <input ng-model="search"ng-keydown="clear()"placeholder="Search"name="srch-term" id="search" class="form-control" type="text">  
  4.             <div class="input-group-btn">  
  5.                 <button class="btn btn-default" type="submit" ng-click="sear()">  
  6.                     <i class="glyphicon glyphicon-search"></i>Search  
  7.                 </button>  
  8.             </div>  
  9.      </div>  
  10. </div>  

Search to firstName, LastName and Phone
 
 

Code For Search button
  1. $scope.sear = function() {  
  2.     var orderBy = $filter('orderBy');  
  3.     $scope.order = function(Btn) {  
  4.         $scope.users = orderBy($scope.users, Btn);  
  5.     };  
  6. };  
Filter With AngularJS
  1. <thead>  
  2.     <a href="" ng-click="Btn=''">Reset</a> ]  
  3.     <table id="mytable" class="table table-striped table-bordered table-condensed table-striped table-hover ">  
  4.         <tr class="danger">  
  5.             <th>  
  6.                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  7.                 <a href="" ng-click="Btn = '-fName'; reverse=true">  
  8. First Name</a>  
  9.             </th>  
  10.             <th class="text-center">  
  11.                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  12.                 <a href="" ng-click="Btn = '-lName'; reverse=true">  
  13. Last Name</a>  
  14.             </th>  
  15.             <th class="text-center">  
  16.                 <a href="" ng-click="Btn = 'name'; reverse=true"></a>  
  17.                 <a href="" ng-click="Btn = '-email'; reverse=true">  
  18. Email Id</a>  
  19.             </th>  
  20.             <th>  
  21.                 <a href="" ng-click="Btn = 'num'; reverse=true"></a>  
  22.                 <a href="" ng-click="Btn = '-number'; reverse=true">  
  23. Phone Number</a>  
  24.             </th>  
  25.             <th class="text-center">  
  26. Image  
  27. </th>  
  28.             <th >  
  29. Action  
  30. </th>  
  31.         </tr>  
  32.     </thead>  
  33. <tbody>  
 
Filter Firstname, lastname and phone.
 
Reset Button to set main formats.
 
Thank You
Ebook Download
View all
Learn
View all