Question

我正在对一个Angular表进行分页，并希望显示表下方的所有页码。

我计划创建一个页码数组，然后使用ng-repeat显示所有这些：

HTML

<tr ng-repeat-start="item in c.filteredList = (c.data | dynamicFilter:c.filter | orderBy:c.sortOrder.order:c.sortOrder.reverse)">

JS

    this.checkPage = function(){
      this.pageNumArr = [];

      for(i=0; i<this.filteredList.length/this.perPage; i++){
        this.pageNumArr.push(i);
      }
    }

其中this.perPage是每页的项目数（由用户设置）。

我无法弄清楚当过滤器发生变化时如何触发checkPage()。

Answer 1

您最好将页码ng-repeat绑定到创建并返回页码数组的函数。这将为该功能创建一个观察器，并使页码数组保持最新。

无需在控制器中手动创建$ watch。

 this.pageNumbers= function(){
      var pageNumArr = [];

      for(i=0; i<this.filteredList.length/this.perPage; i++){
        pageNumArr.push(i);
      }
      return pageNumArr

    }

<span ng-repeat="page in c.pageNumbers()">{{page}}</span>

Answer 2

我认为在过滤器中触发事件不应被视为最佳做法，可能需要找到另一种方法。

顺便说一下，有很多方法：

如果您可以修改该过滤器，只需将$scope引用传递给它，然后通过$scope.emit或$scope.broadcast触发事件：<li ng-repeat="item in items | myFilter:[param1, param2, paramN]"></li>
Angular支持在控制器内部进行过滤，因此，这可能是一个更好的解决方案https://toddmotto.com/everything-about-custom-filters-in-angular-js/（看看过滤器4：控制器/ $范围过滤器）; < / p>
在你的模特身上注册观察者，但是，这对表演来说是不好的......

Answer 3

您可以关注filteredList并在那里拨打checkPage()：

var self = this;
$scope.$watch(
    function() {
      return self.filteredList.length;
    },
    function(newValue, oldValue) {
      if (newValue !== oldValue) {
        self.checkPage();
      }
    }
);

AngularJS：过滤器更改时的触发功能

3 个答案: