Angular - Multiple column filters for table

Question

I have a table where I want to have an input box below each table header to filter its corresponding column. So I have 2 questions: 1. Between thead tag, how would use the "header" variable as a value for the enclosed ng-model? 2. Between tbody tag, what would be the best approach to specify the column name in the ng-repeat for the filter (filter:{ column_name: model_name })?

<table class="table table-striped table-bordered">
    <thead>
        <th ng-repeat="header in tableHeaders">{{header}}<a ng-click="sort_by(header);"></a>
            <div>
                <input type="text" ng-model="search" ng-change="filter()" class="form-control"/> <!-- value for ng-model should match header variable in enclosing ng-repeat -->
            </div>
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered = (list | filter:{ Status: search} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> <!-- "Status" should be corresponding column header -->
            <td ng-repeat="header in tableHeaders">{{data[header]}}</td>
        </tr>
    </tbody>
</table>

tableheaders is an array declared in the controller:

$scope.tableHeaders = ['Environment', 'Server', 'Name', 'Status'];

Dylan Watt · Accepted Answer · 2015-04-09 20:08:46Z

1

Assuming your tableHeader values match the variable names they're associated with, make search an object having ng-model="search[header]" and your filter to just filter: search. Keep in mind these are "ands" not "ors", so it matches on all properties of your search object, which may affect how you want to use that search object. Maybe reset it to null in your header ng-click.

<table class="table table-striped table-bordered">
    <thead>
        <th ng-repeat="header in tableHeaders">{{header}}<a ng-click="sort_by(header);"></a>
            <div>
                <input type="text" ng-model="search[header]" ng-change="filter()" class="form-control"/> <!-- value for ng-model should match header variable in enclosing ng-repeat -->
            </div>
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered = (list | filter: search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> <!-- "Status" should be corresponding column header -->
            <td ng-repeat="header in tableHeaders">{{data[header]}}</td>
        </tr>
    </tbody>
</table>

answered Apr 9, 2015 at 20:08

Dylan Watt

3,38715 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

t tran Over a year ago

This was exactly what I was lookign for. Thanks! Quick question, in the "filter: search" how does it know which column to filter? I would assume it would require something like "filter: search[header]"

Dylan Watt Over a year ago

it maps the properties of the search object to the properties of the searched objects, eg if you have $scope.search = {mobile:2345678989} and an array of persons, each person having a mobile property, it will map search.mobile to person.mobile as it scans persons.

Collectives™ on Stack Overflow

Angular - Multiple column filters for table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related