AngularJS：使用过滤器和ngtable分页显示项目编号问题

Question

我正在使用NG表来显示过滤数据，但我遇到了分页问题。

这是结构：

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

解决这个问题的方法是什么？

Answer 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);

This guy正在做一些与你正在做的非常相似的事情。

Plunker Demo