Question

我对AngularJS代码很新，所以我还在学习。

我正在使用此页面中的分页代码：http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs

现在，我要做的是分页图像列表。此图像列表有自定义AngularJS过滤器，包括文件大小和图像尺寸，由复选框控制。分页主要起作用，除非我点击其中一个“过滤依据”选项。然后，有分页，但可能在一页上有2张图片，在另一页上有10张图片。

这是ngRepeat专栏：

<tr dir-paginate="image in Images | filter: imageSearch | itemsPerPage: 10 | dimBoxes:filterByDim | sizeBoxes: filterBySize | orderBy: predicate" current-page="currentPage">

以下是其中一个自定义过滤器的示例：

App.filter('sizeBoxes', function() {
  return function(items, filterBySize) {
    var filtered = [];

    angular.forEach(items, function(item) {
      var fileSize = item.filesize / 1024;

        if (!filterBySize.under500kb && !filterBySize.from500kbto1mb && !filterBySize.over1mb) {
          filtered.push(item);
    }

    if (fileSize < 500 && filterBySize.under500kb) {
      filtered.push(item);
    } else if (fileSize >= 500 && fileSize <= 1024 && filterBySize.from500kbto1mb) {
      filtered.push(item);
    } else if (fileSize > 1024 && filterBySize.over1mb) {
      filtered.push(item);
    }
  });

  return filtered;
  };
});

我认为，有几个帖子似乎相似，但并不真正适用于我的具体情况。提前感谢您的帮助。

Answer 1

我认为问题是您需要在所有自定义过滤器之后放置itemsPerPage过滤器最后。

来自文档：

注意：此过滤器应位于任何其他过滤器之后，以便按预期工作。一个安全的规则是始终将它放在表达式的末尾。

所以你对指令的调用如下：

<tr dir-paginate="image in Images | filter: imageSearch | dimBoxes:filterByDim | 
                  sizeBoxes: filterBySize | orderBy: predicate | itemsPerPage: 10" 
    current-page="currentPage">

AngularJS与自定义过滤器的分页

1 个答案: