使用分页AngularJs进行复合过滤

Question

在我正在进行的角度应用程序中,我正在尝试将复合过滤与分页结合使用.将有一个带有x条目的表,每行有三列.我在每列上面都有一个输入,用户可以根据输入文本过滤列.过滤器复合以将结果缩小到最佳 - 但在我的用例中,仍然可能在一个页面上显示太多,因此我尝试使用分页.

表体看起来像这样:

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

我所遇到的棘手部分是让分页符合所应用的过滤器.我见过这样一个例子,作者在一个单一的搜索字段上使用$ 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作为我正在做的事情的一个例子,但仍然需要一些指导与分页.我遇到的一个问题是我不确定如何使分页专门适用于数据列表.我已经看过其他的例子并且模仿了但是我认为过滤可能会弄乱它(不确定)？任何帮助赞赏.

Answer 1

您不必留意过滤器。您只需将过滤器绑定到分页即可。这样 Angular 将处理所有事情，并且您不需要在控制器中编写额外的代码。我更新了你的插件，你可以看到一切是如何通过角度绑定实现的。

你还有limitTo处理分页的过滤器

<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