In the angularjs search is quite simple. In this post I have used one text box to search all the maching fields from the table.
Step 1: Add input control and bind model with this. Here I have binded 'ng-model="searchKeyword"' like as following.
<input type="text" class="form-control" placeholder="Search Text" name="inputSearch" value="" ng-model="searchKeyword" />
Step 2: Now you need to add the "filter" in the "ng-repeat" like as following.
<div class="row">
<table class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items | filter : searchKeyword">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Qty}}</td>
</tr>
</tbody>
<tfoot class="text-center">
<tr ng-show="vm.items.length==0">
<td colspan="10" class="text-center">No record found.</td>
</tr>
</tfoot>
</table>
</div>
Step 1: Add input control and bind model with this. Here I have binded 'ng-model="searchKeyword"' like as following.
<input type="text" class="form-control" placeholder="Search Text" name="inputSearch" value="" ng-model="searchKeyword" />
Step 2: Now you need to add the "filter" in the "ng-repeat" like as following.
<div class="row">
<table class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items | filter : searchKeyword">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Qty}}</td>
</tr>
</tbody>
<tfoot class="text-center">
<tr ng-show="vm.items.length==0">
<td colspan="10" class="text-center">No record found.</td>
</tr>
</tfoot>
</table>
</div>
No comments:
Post a Comment