Saturday, 18 March 2017

How to use multiple seach boxes for searching by multiple fields ?


Assume that the controller is setting list of employees objects in $scope.employees

MULTIPLE SEARCH FIELDS

<div ng-controller="myController"> 
  <input type="text" placeholder="Search Name"
ng-model="searchText.name" />

  <input type="text" placeholder="Search City" ng-model="searchText.city" />

  <br/><br/>
  <table>
     <thead>
        <tr> <th>Name</th> <th>City</th> <th>Salary</th> </tr>
     </thead>
     <tbody>
        <tr ng-repeat="employee in employees |filter:searchText">
           <td> {{ employee.name }} </td>
           <td> {{ employee.city }} </td>
           <td> {{ employee.salary }} </td>
        </tr>
     </tbody>
  </table> 
</div>



USING EXACT MATCH
Use a boolean variable for Exact match with the expression after | filter


<div ng-controller="myController"> 
  <input type="text" placeholder="Search Name"
ng-model="searchText.name" />

  <input type="text" placeholder="Search City" ng-model="searchText.city" />
  <input type="checkbox" ng-model="exactMatch" />

  <br/><br/>
  <table>
     <thead>
        <tr> <th>Name</th> <th>City</th> <th>Salary</th> </tr>
     </thead>
     <tbody>
       
<tr ng-repeat="employee in employees |filter:searchText:exactMatch">
           <td> {{ employee.name }} </td>
           <td> {{ employee.city }} </td>
           <td> {{ employee.salary }} </td>
        </tr>
     </tbody>
  </table> 
</div>


No comments:

Post a Comment

Note: only a member of this blog may post a comment.