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

Answer 2

I attempted to follow @Clems answer but to no avail. Doing some research I found a solution from the ngTable Github repository and there is a lot simpler solution.

<input type="text" ng-model="tableParams.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>
     </tr>
</table>

Though only issue (which I am trying to find out now) is how to have multiple columns filtered by a single input. Hope this helps

Answer 3

You can do this:

1. Create a separate text box and a separate table. The ng-model attribute of the textbox should be the one on which you need to filter the data. So, this textbox can be placed anywhere in your page.

   <input type="text" ng-model="name" />
   

2. Paint the table using ng-repeat and provide a filter with the value as that provided in ng-model for the textbox.

   <tr ng-repeat="item in items|filter:name">
   

Here's a sample:

<table>
            <th>Item Name</th>
            <th>Item Price</th>
            <tr ng-repeat="item in items|filter:name">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>

</table>
<input type="text" ng-model="name" />