コンパイルによるページ分割AngularJs

Question

角型アプリケーションでは、私は、ページネーションと組み合わせて複合フィルタリングを使用しようとしています。 xのエントリを持つテーブルがあります。各行には3つの列があります。私は、ユーザーが入力テキストに基づいて列をフィルターに掛けることができる各列の上に入力を持っています。フィルタの結果を最適化するようにコンパイルしますが、私の使用例では1ページに表示するには多すぎるかもしれないので、ページネーションを使用しようとしています。

<tbody> 
    <tr> 
     <td class="col-md-4"> 
     <input type="text" ng-model="nameFilter" class="form-control" placeholder="Name"> 
     </td> 
     <td class="col-md-4"> 
     <input type="text" ng-model="ageFilter" class="form-control" placeholder="Age"> 
     </td> 
     <td class="col-md-4"> 
     <input type="text" ng-model="stateFilter" class="form-control" placeholder="State"> 
     </td> 
    </tr> 
    <tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage"> 
     <td class="col-md-4">{{person.name}}</td> 
     <td class="col-md-4">{{person.age}}</td> 
     <td class="col-md-4">{{person.state}}</td> 
    </tr> 
    </tbody> 

私が午前トリッキーな部分は、改ページが適用されるフィルタで動作するようになっている：

テーブル本体は、次のようになります。私は、単一検索フィールドにthis one where the author uses a $watchのような例を見てきましたが、ページネーションを管理することができます。私はまた、調査を通じて、使用できる$watchCollectionがあるが、それを実装する方法はわかりません。

$scope.$watchCollection('[nameFilter, ageFilter, stateFilter]', function(newValues) { 
     //not sure what to do here. 
     console.debug(newValues); 

     $scope.filtered = '';; //really it should equal the now filtered by 3 filters group of people 
     $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.itemsPerPage); 
    }); 

この場合でも時計を使用することをお勧めしますか？私はこの作業をplunkerとして取り組んでいますが、ページネーションに関するいくつかのガイダンスが必要です。私が持っている質問の1つは、データのリストを使ってページネーションを具体的に適用する方法がわかりません。私は他の例を見て、模倣しましたが、私はフィルタリングがそれを混乱させるかもしれないと思います（わからない）？どんな助けもありがたい。

Answer 1

フィルタを監視する必要はありません。フィルタをページネーションにバインドするだけで済みます。このように、角度はすべてを処理し、コントローラに追加のコードを書く必要はありません。私はあなたのプランカを更新し、どのように角度バインディングですべてが実装されているかを見ることができます。

また、あなたは、ページネーション

<tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage"> 
       <td class="col-md-4">{{person.name}}</td> 
       <td class="col-md-4">{{person.age}}</td> 
       <td class="col-md-4">{{person.state}}</td> 
      </tr> 


<ul uib-pagination 
     total-items="(people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter}).length" 
     items-per-page="itemsPerPage" 
     boundary-links="true" ng-model="currentPage"></ul> 

https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview