Search with Filter | AngularJS
Step 1 : Add the search field to the table(data div, I use table)
Step 2 : Add Filter to list
Final code will look like :
Enjoy Searching . . . with AngularJS Filter
<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: