Question

所有我按照http://bazalt-cms.com/ng-table/example/4

的内容在ng-table中创建了一个过滤器框

我的代码与示例相同：在html中创建过滤器：

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

现在我们可以看到布局：

enter image description here

但我不想在表格中使用过滤器框，如下所示：

enter image description here

文件管理器位于表格之上我的过滤器代码：

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

...使用ng-model =＆＃34; filter.name＆＃34;绑定，但它不起作用......

有没有办法实现我的想象力？

Answer 1

帕姆错了。您不应该在ngtable或已经完成它的任何组件之后进行过滤。否则，你会有意想不到的事情。

只需修改你的表参数并通过ref过滤器对象绑定：

$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);
    }
});

并删除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>

通过这种方式，数据在数据重新加载时被过滤而不在数据显示上被过滤。并且您的$ scope.filter在UI上绑定，并由ngTable观看$。

Demo on Plunker

Answer 2

我试图关注@Clems的答案，但无济于事。做了一些研究我找到了ngTable Github repository的解决方案，并且有一个更简单的解决方案。

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

虽然只有问题（我现在试图找出）是如何通过单个输入过滤多个列。希望这有帮助

Answer 3

你可以这样做：

创建单独的文本框和单独的表。 ng-model 文本框的属性应该是您需要的属性过滤数据。因此，此文本框可以放在页面的任何位置。
```
<input type="text" ng-model="name" />
```
使用ng-repeat绘制表格并提供带有的过滤器值为ng-model中为文本框提供的值。
```
<tr ng-repeat="item in items|filter:name">
```

以下是一个示例：

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

如何在ng-table中定义一个过滤器框？

3 个答案: