Monday, 27 June 2016

AngularJS simple search functionality.

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>

No comments:

Post a Comment