Compound filtering with pagination AngularJs

Question

In an angular application I am working on I am trying to use compound filtering in conjunction with pagination. There will be a table with x entries, each row with three columns. I have an input above each column where the user can filter the columns based on input text. The filters compound to narrow down the results to the best - but in my use case there still might be too many to display on one page, therefore I am trying to use pagination.

The table body looks like this:

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

The tricky part I am having is getting the pagination to work with the filters applied. I have seen an example like this one where the author uses a $watch on a singular search field and can still manage pagination. I also have seen through research there is a $watchCollection that can be used, but am not sure how to implement it.

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

Are watches even the best choice to use in this case? I have this working plunker as an example of what I am working on, but still need some guidance with the pagination. One of the questions I do have is I am not sure how to make the pagination apply specifically with the list of data. I have seen other examples and have mimicked but I think the filtering might be messing it up (not sure)? Any help appreciated.

Answer 1

You don't have to watch for the filters. You only need to bind the filters to your pagination. This way angular will handle everything and you don't need to write additional code in the controller. I updated your plunker and you can see how is everything is implemented with angular bindings.

Also you have limitTo filter that handles pagination

<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