Filtrowanie złożone z paginacją AngularJs

Question

W aplikacji kątowej pracuję nad Próbuję użyć filtrowania złożonego w połączeniu z paginacją. Pojawi się tabela z wpisami x, każdy wiersz z trzema kolumnami. Mam dane nad każdą kolumną, w której użytkownik może filtrować kolumny na podstawie tekstu wejściowego. Filtry złożą się, aby zawęzić wyniki do najlepszych - ale w moim przypadku użycia może być zbyt wiele do wyświetlenia na jednej stronie, dlatego próbuję użyć stronicowania.

ciało tabela wygląda następująco:

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

Najtrudniejsze mam jest coraz paginacji pracować z zastosowanych filtrów. Widziałem przykład jak this one where the author uses a $watch w pojedynczym polu wyszukiwania i nadal mogę zarządzać stronami. Zauważyłem też, że istnieje $watchCollection, którego można użyć, ale nie jestem pewien, jak go wdrożyć.

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

Czy zegarki są nawet najlepszym wyborem do zastosowania w tym przypadku? Mam to działające plunker jako przykład tego, nad którym pracuję, ale nadal potrzebuję wskazówek z paginacji. Jedno z pytań, które mam, to to, że nie wiem, w jaki sposób sprawić, aby paginacja miała zastosowanie konkretnie do listy danych. Widziałem inne przykłady i mam naśladowane, ale myślę, że filtrowanie może to zepsuć (nie jestem pewien)? Każda pomoc doceniona.

Answer 1

Nie musisz oglądać filtrów. Wystarczy powiązać filtry z paginacją. W ten sposób kątowe zajmie się wszystkim i nie trzeba pisać dodatkowego kodu w kontrolerze. Zaktualizowałem twój plunker i widzisz jak wszystko jest zaimplementowane za pomocą kątowych wiązań.

Ponadto masz limitTo filtr, który obsługuje paginacji

<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