How can data be filtered in a html table with filter in each column separately using Angular JS? - angularjs

Question

I want to use some text box in a dropdown or so beside each column header for text input for searching in that particular column as in for ID or Name.
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in data">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

use filter like this
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

It's simple, you just have to add a input for each column, like this:
<table class="table">
<tbody>
<tr>
<th>
<p>ID</p>
<input ng-model="search.id" />
</th>
<th>
<p>Name</p>
<input ng-model="search.name" />
</th>
</tr>
<tr ng-repeat="item in data | filter:search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
Take a look in this example and this answer