角をフィルタリングすると角度を調整します

Question

私はAngularを初めて使用しています。

私の質問はthis oneに似ています。私は少し違うことをやっているので、受け入れられた答えは私のために働いていません。

私はAngular UI BootstrapのPaginationディレクティブを使用してデータセットをページングしていますが、角度フィルタを使用してユーザーが任意の列のデータをフィルタできるようにしています。

データがフィルタリングされると、ユーザーは自分が現在表示しているページのデータのみを表示するという問題があります。

Here's the full Plunker

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items).length; 
    $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end); 
}; 

例えば、状態フィルタで「GA」（単語「国家」の下のテキストボックス）の状態であなたの鍵は、データが返されない場合。ただし、ページ4を選択して、条件を満たすレコードを1つ表示することができます。

私がしたいのは、改ページが自動的に調整され、適切なレコードがユーザーに表示された結果の1ページのみを表示することです。

私は既にこの機能を持っている他のグリッドディレクティブがあることを知っていますが、私は現在の方法を完全に放棄したくありません。

Answer 1

あなたのフィルターにパラメータを忘れてしまったが、私はあなたが

app.filter('paginate', function() { 
    return function(items, currentPage, itemsPerPage) { 
     if (!Array.isArray(items)) { 
      return items; 
     } 

     var sliceStart = (currentPage - 1) * itemsPerPage; 

     return items.slice(sliceStart, sliceStart + itemsPerPage); 
    }; 
}); 

はコントローラ

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 

    $scope.filteredItems = $filter('filter')($scope.items, $scope.search); 
    $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.propertyName, $scope.reverse); 
}; 

そして最後に更新するフィルタリングロジックを移動するカスタムページネーションフィルタを書い示唆

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items, $scope.search).length; 
    $scope.filteredItems = ($filter('filter')($scope.items, $scope.search)).slice(begin, end); 
}; 

Answer 2

を呼び出します2つの場所であなたのHTML。ここでは、あなたのNGリピートにページネーションのためのlimitToフィルタを使用することができます

<tr ng-repeat="item in filteredItems | paginate : currentPage : itemsPerPage"> 

、ここ

<ul uib-pagination total-items="filteredItems.length" ng-model="currentPage" class="pagination-sm" boundary-links="true" force-ellipses="true" items-per-page="5" ></ul> 

Your updated example

Answer 3

。

<tr ng-repeat="item in items | filter:search:strict | orderBy:propertyName:reverse | limitTo:5:(currentPage-1)*5" > 

トリッキーな部分は、フィルタが変更されたときにページネーションウィジェットに表示するページ数を更新することです。 limitToフィルターが適用される前に、フィルターされた項目を変数に割り当てることでこれを行うことができます。例えばこのアプローチで

<tr ng-repeat="item in filteredItems = (items | filter:search:strict | orderBy:propertyName:reverse) | limitTo:5:(currentPage-1)*5" > 

<ul uib-pagination total-items="filteredItems.length" ...></ul> 

あなたのコントローラ内の任意のフィルタリングを行うか何か$watchの必要はありません。

Working Plunkr：http://plnkr.co/edit/8NinIYdRsXDVLCPz5VJN?p=preview