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

【问题标题】：AngularJS: display item number problems, using filter and ngtable paginationAngularJS：显示项目编号问题，使用过滤器和 ngtable 分页
【发布时间】：2014-06-26 20:16:26
【问题描述】：

我正在使用 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

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

【问题讨论】：

标签： angularjs filter pagination ngtable

【解决方案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

【讨论】：