How to define a filter box out of the ng-table?

Question

All I create a filter box in ng-table following the instrunctions of http://bazalt-cms.com/ng-table/example/4

my code is same as the example: create filter in html:

<table ng-table="tableParams" show-filter="true" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" filter="{ 'name': 'text' }">

now we can see the layout:

but I don't want the filter box in table, like this:

the filer is above the table my code of the filter box :

<input type="text" ng-model="filter.name" />
<table ng-table="tableParams" show-filter="false" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" filter="{ 'name': 'text' }">
            {{user.name}}
        </td>

... using ng-model="filter.name" to bind, but it doesn't work...

Is there any way implement my imagination?

Answer 1

Pam is wrong. You should never filter after ngtable or any components which already done it. Else, you will have unexpected things.

Just modify your table params and bind by ref your filter object:

$scope.filter = {name: 'T'};
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    filter: $scope.filter
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ?
               $filter('filter')(data, params.filter()) :
               data;

        $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve($scope.users);
    }
});

and remove filter stuff in your tr

<input type="text" ng-model="filter.name"/>
<table ng-table="tableParams"  class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'" >
            {{user.name}}
        </td>
        <td data-title="'Age'">
            {{user.age}}
        </td>
    </tr>
</table>

With this way, data is filtered on data reload and not on data display. And your $scope.filter is binded on UI and $watched by ngTable.

Demo on Plunker