使用AngularJs进行分页的复合过滤

10 浏览
0 Comments

使用AngularJs进行分页的复合过滤

我正在开发一个Angular应用程序，我试图将复合过滤与分页结合使用。将有一个带有x个条目的表格，每行有三列。我在每列上方都有一个输入框，用户可以根据输入的文本对列进行过滤。这些过滤器通过组合来缩小结果范围以得到最佳结果，但在我的用例中，可能仍然有太多结果无法在一页上显示，因此我尝试使用分页。

表格主体如下所示：



  
    
  
  
    
  
  
    
  


  {{person.name}}
  {{person.age}}
  {{person.state}}

我遇到的棘手问题是如何使分页与应用的过滤器一起工作。我看到了一个例子，作者在一个单一的搜索字段上使用了$watch，并且仍然可以管理分页。通过研究，我还了解到可以使用$watchCollection，但我不确定如何实现它。

$scope.$watchCollection('[nameFilter, ageFilter, stateFilter]', function(newValues) {
  //不确定在这里该做什么。
  console.debug(newValues);
  $scope.filtered = '';; //实际上它应该等于现在经过3个过滤器过滤后的人员组
  $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.itemsPerPage);
});

在这种情况下，监视器是否是最佳选择？我有一个正在工作的示例，但仍然需要一些关于分页的指导。我有一个问题，就是我不确定如何使分页仅应用于数据列表。我看到了其他示例并进行了模仿，但我认为过滤器可能会搞乱它（不确定）。感谢任何帮助。

0

1 答案

0 Comments

在这个问题中，出现的原因是需要在AngularJS中实现带有分页的复合过滤。解决方法是将过滤器绑定到分页上，这样AngularJS会处理所有事情，而不需要在控制器中编写额外的代码。

解决方法如下：

1. 使用limitTo过滤器处理分页，将以下代码添加到HTML中的数据表格中：


    {{person.name}}
    {{person.age}}
    {{person.state}}

2. 在页面底部添加分页控件，使用uib-pagination指令，并将以下代码添加到HTML中：

    3. 更新代码示例中的plunker链接，以查看整个实现的代码。

    原文链接：[https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview](https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview)

    0