AngularJS Sort table columns - angularjs

Question

I have a table filter whichs show the content according to the user parameters, this is working perfectly but now I want to let the user filter according to each column.
This is the issue:
When you type "User" on the text input (Filter by columns" I want to only display the "User Column", if you type "Start Date" then only displays "Start Date column" I'm wondering if this is possible using filter option or how can I approach to this requirement.
Here's my code:
<div class="col-xs-10 grid-container">
<div class="row form-entry">
<div class="col-xs-3 input-container">
<input type="text" placeholder="Search in Grid" ng-model="searchFills"/>
</div>
<div class="col-xs-3 input-container">
<input type="text" placeholder="Filter by columns" />
</div>
</div>
<div class="col-xs-10 grid-container">
<div class="generic-grid">
<table class="table-bordered grid-table table-hover">
<thead>
<tr>
<th>id</th>
<th>User</th>
<th>Alt User</th>
<th>Creation Date</th>
<th>Start Date</th>
<th>Recieved Date</th>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fill in fills_list | filter:searchFills">
<td>
{{fill.id}}
</td>
<td>
{{fill.user}}
</td>
<td>
{{fill.useralt}}
</td>
<td>
{{fill.creationdate}}
</td>
<td>
{{fill.startdate}}
</td>
<td>
{{fill.recieveddate}}
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

You can add ng-model="columnFilter" to your input:
<input type="text" placeholder="Filter by columns" `ng-model="columnFilter"` />
Then addng-hide="columnFilter == 'Start Date'" to <td>{{fill.user}}</td>
Add ng-hide="columnFilter == 'User'" to <td>{{fill.startdate}}</td>
And add ng-hide="columnFilter == 'User' || columnFilter == 'Start Date'" to the rest of the <td>'s.

Answer 2

If you want to filter by column, then you need ng-repeat by columns. After that you can use the same filter that you are using for filtering rows
controller.js
controllers.controller("MainController", ["$scope", function($scope) {
return ["$scope", function ($scope) {
$scope.columns = [{
title: "id",
alias: "id"
}, {
title: "User",
alias: "user"
}, {
title: "Alt User",
alias: "useralt"
}, {
title: "Creation Date",
alias: "creationdate"
}, {
title: "Start Date",
alias: "startdate"
}, {
title: "Recieved Date",
alias: "recieveddate"
}];
}]);
template.html
<div ng-controller="MainController">
<div class="col-xs-10 grid-container">
<div class="row form-entry">
<div class="col-xs-3 input-container">
<input type="text" placeholder="Search in Grid" ng-model="searchFills" />
</div>
<div class="col-xs-3 input-container">
<input type="text" placeholder="Filter by columns" ng-model="searchColumn" />
</div>
</div>
<div class="col-xs-10 grid-container">
<div class="generic-grid">
<table class="table-bordered grid-table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns | filter:searchColumn">{{column.title}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fill in fills_list | filter:searchFills">
<td ng-repeat="column in columns | filter:searchColumn">{{fill[column.alias]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
That will filter any column in a table.