使用分页 AngularJs 进行复合过滤

Posted

技术标签:

【中文标题】使用分页 AngularJs 进行复合过滤【英文标题】:Compound filtering with pagination AngularJs 【发布时间】:2017-03-17 12:06:39 【问题描述】:

在我正在研究的角度应用程序中,我尝试将复合过滤与分页结合使用。将有一个包含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>

我遇到的棘手部分是让分页与应用的过滤器一起工作。我在单个搜索字段上看到了像 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 作为我工作的一个例子,但仍然需要一些分页指导。我确实有一个问题是我不确定如何使分页专门适用于数据列表。我看过其他示例并进行了模仿,但我认为过滤可能会搞砸(不确定)?任何帮助表示赞赏。

【问题讨论】:

***.com/a/17838375/5292301 Kliment 答案是有效的,请注意,当您对本地集合进行排序时,使用角度过滤可能会导致用户混淆,并且他可能希望从所有 DB 可能的集合中获得匹配。 @Pravin 这是真的。您必须在控制器中编写额外的逻辑以进行分页。但是,如果您在代码中稍微使用一下变量,您就可以轻松实现这一目标 【参考方案1】:

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

您还有处理分页的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

【讨论】:

以上是关于使用分页 AngularJs 进行复合过滤的主要内容,如果未能解决你的问题,请参考以下文章

过滤后更新AngularJS中的分页

使用 angularjs 进行 django-rest 分页

用angularJs实现分页功能,不带省略号。

使用AngularJS中的filterFilter函数进行过滤

[Angularjs]$http.post与$.post

如何通过 AngularJS 进行分页?