フィルタリング後にAngularJSのページ分割を更新します

Question

私は既にページネーションを実装しています。 結果をフィルタリングした後で、ページ番号を更新したいと思います。

形態：

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/> 

リスト：

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li> 

ページネーション：

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination> 

コントローラ：

$scope.filter = function() { 
    window.setTimeout(function() { //wait for 'filtered' to be changed 
     $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit); 
     $scope.setPage = function(pageNo) { 
      $scope.currentPage = pageNo; 
     }; 
    }, 10); 
}; 

私の問題は、ページ番号をクリックした後、または入力フィールドに次の文字を入力した後でページ番号が更新されたことだけです。だから遅くまで一歩進んでいます。

EDIT：http://jsfiddle.net/eqCWL/2/

Answer 1

利用$timeout代わりのwindow.setTimeOut：私はjsFiddleにソースを追加しました。 $timeoutは、角度で一貫して動作するように正しくラップされます。

Answer 2

@abject_errorの回答は$timeoutを使用しています。私は彼の提案であなたのフィドルを編集し、私は解決策は、競合状態の形での大きな問題の指標であると考え、このjsFiddle

CAVEAT

を作りましたよ！

jsFiddle using filterFilter and $watch

とそのフィドルは実数のため、それを回避する方法です。

そしてここでは、あなたの競合状態がsearchの変化と$scope.filteredの可用性を扱うとの間にある説明

です。

私はこの競合状態を解決するために排除するために犯人がいると思う

：noOfPagesの計算を行うためにオフに解雇するng-changeを使用し

ng-model="search" ng-change="filter()" 

と

ng-repeat="data in filtered = (list | filter:search)......." 

「フィルタを（）」 filteredを作成するための検索の変更にも依存します。このようにすると、フィルタリングされたリストがページ数を計算するために準備ができていない可能性があります。そのため、10msごとに "filter（）"をホールドしてタイムアウトにすると、

searchの変更を「監視」し、$scope.filteredを作成して$scope.noOfPagesを計算するアクセス権を持つ場所でリストをフィルタリングする方法です。すべて順番に、レースなし。

角度がありますように！コントローラのfilterフィルタは、機能が非常に悪いので、filterFilterという名前で使用することができます。これをチェックしてくださいFilters Guide - Using filters in controllers and services

コントローラに注入してください。

function pageCtrl($scope, filterFilter) { 
    // ... 
} 

scopes docs

$scope.$watch('search', function(term) { 
    // Create filtered 
    $scope.filtered = filterFilter($scope.list, term); 

    // Then calculate noOfPages 
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit); 
}) 

変更私たちの新しい方法を反映するためのテンプレートに記載さ$watch機能、それを使用してください。これ以上のDOMフィルタ、またはng-change

<input type="text" ng-model="search" placeholder="Search"/> 

と

<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> 
    {{data.name}} 
</li> 

Answer 3

にあなたは、単に代わりに、このディレクティブを使用することができませんでした：

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

をコードを維持しながら、それはフィルターで改ページを提供しています素敵で清潔です。

偉大なコードのためのmichaelbromleyへの誇り。

Answer 4

使用角度$scope.$watch

$scope.$watch('search', function(term) { 
    $scope.filter = function() { 
     $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit); 
    } 
}); 

ソース。 http://jsfiddle.net/eqCWL/2/

デモ; http://jsfiddle.net/eqCWL/192/