AngularJS Sort table columns

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

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.

Answer 2

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.