Search with Filter | AngularJS

Step 1 : Add the search field to the table(data div, I use table)

<caption>
  <input type="search" class="form-control" style="width: 25%;float: right;" 
placeholder="Search User' Contact"  
ng-model="searchContact" />
</caption>

Step 2 : Add Filter to list

<tr ng-class="{'even': $index%2 == 0, 'odd': $index%2 == 1}"  
ng-repeat="contact in vm.contactList | filter : searchContact"> 

Final code will look like : 

<table>
      <caption>
        <input type="search" class="form-control" style="width: 25%; 
         float: right;" placeholder="Search User' Contact"   
         ng-model="searchContact" />
      </caption>
  <thead>
    <tr>
      <th>Id</th>
      <th>Mobile</th>
      <th>Email Id</th>
      <th>Address</th>
      <th>User</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-class="{'even': $index%2 == 0, 'odd': $index%2 == 1}"  
    ng-repeat="contact in vm.contactList | filter : searchContact">
      <td>
        <a ui-sref="contact.show({id: contact.id})">{{contact.id}}</a>
      </td>
      <td>
        <span>{{contact.mobile}}</span>
      </td>
      <td>
        <span>{{contact.emailId}}</span>
      </td>
      <td>
        <span>{{contact.address}}</span>
      </td>
      <td>
        <a ui-sref="user.show({id: contact.user.id})">
        {{contact.user.toString()}} 
        </a>
      </td>
    </tr>
  </tbody>
</table


Enjoy Searching . . . with AngularJS Filter

No comments:

Powered by Blogger.