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

admin管理员组

文章数量:1290997

All I create a filter box in ng-table following the instrunctions of

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?

All I create a filter box in ng-table following the instrunctions of http://bazalt-cms./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?

• javascript
• angularjs
• ngtable
• self-referencing-table

Share Improve this question Follow asked Aug 22, 2014 at 6:38 Zhao LeoZhao Leo 10111 silver badge33 bronze badges 1

• You can refer this link too. stackoverflow./questions/19674125/… – Saurabh Commented Jan 5, 2016 at 16:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

Pam is wrong. You should never filter after ngtable or any ponents 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

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

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" />

本文标签： javascriptHow to define a filter box out of the ngtableStack Overflow