1

我正在使用 NG-table 显示过滤后的数据，但我遇到了分页问题。

这是构造：

HTML：

<li ng-repeat="(type, value) in winetypes">
    <input type="checkbox" ng-model="winetypes[type]"/> {{type}}
</li>



<ul>
    <li ng-repeat="wine in data | winetypefilter:winetypes">
        {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
    </li>
</ul>


<p><strong>Page:</strong> {{tableParams.page()}}</p>

<p><strong>Count per page:</strong> {{tableParams.count()}}</p>

<table ng-table="tableParams" class="table">
    <tr ng-repeat="user in filtered = ($data | winetypefilter:winetypes)">
        <td data-title="'Name'">{{user.name}}</td>
    </tr>
</table>

过滤和分页工作正常，但如果选中红色复选框（红酒），所有过滤的红酒都会出现在经典列表中（未链接到 ng-table）。

通常在 ng-table 创建的表格中，在每个页面中应该出现 10 个项目，但事实并非如此（见下图）

这里的演示： http ://plnkr.co/edit/9xTdaQ2bTfY0jQpZAL1T?p=preview

截屏

有什么方法可以解决这个问题？？

4

1 回答 1

1

您的数据在分页后会被过滤，这就是您在网格中看不到 10 个项目的原因。您想先过滤数据，然后再分页。过滤控制器而不是视图中的数据：

getData: function($defer, params) {
   var filteredData = $filter('winetypefilter')(data, $scope.winetypes);
   $defer.resolve(filteredData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}

HTML

<tr ng-repeat="user in filtered = ($data)">

由于您没有使用 ngTable 内置的过滤器系统，因此您需要在过滤器更改时手动刷新数据：

$scope.$watch("winetypes", function(newvalue, oldvalue) {
  $timeout(function(){
    $scope.tableParams.reload();
  });
}, true);

这个人正在做的事情与你正在做的事情非常相似。

Plunker 演示

于 2014-06-27T01:28:03.270 回答