1

フィルタリングされたデータを表示するために 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

キャプチャ画面

この問題を解決する方法は何ですか??

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

この男はあなたがしていることと非常によく似たことをしています。

プランカーデモ

于 2014-06-27T01:28:03.270 に答える