dir-pagination directive angularjs : 有什么方法可以获取分页当前页面的所有记录吗？

Question

我正在使用@michaelbromley 的目录分页指令。我想获取指令当前页面上的所有记录。有什么办法吗？

这里是link：dir-pagination，所以我需要一个从100到96的5个records集合，有什么快速的方法吗？

我尝试了一些方法但没有用。

Answer 1

您可以使用数组切片方法，因为您已经可以访问大型数组，知道您所在的页码以及每页的元素数。您可以在下面的代码中重用 getPage 函数来实现这一点。

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.currentPage = 1;
  $scope.pageSize = 5;
  var meals = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

  function getPage(currentPage, pageSize, arr, reverse) {  
    var beginIndex, endIndex, noOfPages;

    if(reverse) {
       beginIndex = arr.length - currentPage * pageSize;  
    } else {
      beginIndex = currentPage * pageSize - pageSize;
    }

    endIndex = beginIndex + pageSize;
    beginIndex = beginIndex < 0 ? 0 : beginIndex;
    return arr.slice(beginIndex, endIndex);
  }

  //This will return the 5 elements in page 1 of meals array which will be meals 11 to 15 since the array is bound to the pagination directive in the reverse (desc) order
  $scope.firstFiveArrRev = getPage($scope.currentPage, $scope.pageSize, meals, true);

  //This will return the 5 elements in page 1 of meals array which will be meals 1 to 5 since the array is bound to the pagination directive in ascending order
  $scope.firstFiveArr = getPage($scope.currentPage, $scope.pageSize, meals, false);
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    Displaying elements from page number {{currentPage}}
    <br />
    Page size is set to {{pageSize}}
    <br />
    When order is Reverse: true
    <div>{{ firstFiveArrRev.toString() }}</div>

    When order is Reverse: false
    <div>{{ firstFiveArr.toString() }}</div>
  </body>

</html>

这里是plnkr

http://plnkr.co/edit/CgH1WFR1JvOLmQsacVoI?p=preview

Answer 2

这是另一种可能的方法，它不需要您从 dir-paginate 表达式中复制逻辑：

对于每个重复的项目，您可以将该项目推送到控制器中的数组中。这当然会为您提供该页面的所有项目。

这是一个例子：

<ul>
   <li dir-paginate="meal in perman  = ( meals | filter:q ) | orderBy: order?'key':'-key' | itemsPerPage: pageSize" current-page="currentPage" ng-init="addMeal(meal)">{{ meal.key + ': ' +meal.val }}</li>
</ul>

然后在控制器中：

$scope.addMeal = function(meal) {
  if (meal) {
    if ($scope.page.length === $scope.pageSize + 1) {
      $scope.page = [];
    }
    $scope.page.push(meal);
  }
}

我没有进行昂贵的测试，但一般原理应该有效。我认为这有点老套，但作为 Rathish 提供的答案的替代方案，值得了解。

Answer 3

我运行遇到了同样的问题，但这里的答案不能满足我的需求（或者可能是想要的）。我决定自己解决它，并决定创建一个过滤器，其唯一目的是在给定目标上的给定属性中记录通过它的项目。我想到了这个：

/**
 * Author: Eric Ferreira <http://whosebug.com/users/2954747/eric-ferreira> ©2015
 *
 * This filter will sit in the filter sequence, and its sole purpose is to record 
 * the current contents to the given property on the target object. It is sort of
 * like the 'tee' command in *nix cli.
 */
angular.module('app').filter('record', function() {
    return function(array, property, target) {
        if (target && property) {
            target[property] = array;
        }
        return array;
    }
});

然后你在分页中使用过滤器（或者任何你想实际获取当前数组的地方[想想，在用搜索查询过滤后，在分页后，在过滤当前页面后，等等]）像这样：

<div dir-paginate="item in items | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>

您也可以在一个序列中多次使用它：

<div dir-paginate="item in items | filter:searchQuery | record:'filtered':this | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>

以上将同时记录当前页面和当前过滤查询结果的所有记录。

这将记录（并在更改时更新）$scope.currentPage 中的当前页面。上例中的 this 就是过滤器的目标。它解析为 $scope.this，对于大多数意图和目的，它只是 $scope.

在您的特定情况下，您可以使用此行（在 adding/requiring 模块中的过滤器之后）代替您的分页：

<li dir-paginate="meal in perman  = ( meals | filter:q ) | orderBy: order?'key':'-key' | itemsPerPage: pageSize | record:'currentPage':this">{{ meal.key + ': ' +meal.val }}</li>

我继续并 fork 你的 plunker 以证明它也能正常工作：

http://plnkr.co/edit/uC3RiC?p=preview

Answer 4

从这里下载 dirPagination.js。
现在将 dirPagination.js 添加到您的页面。
像这样在你的模块中添加angularUtils.directives.dirPagination

var app = angular.module("myApp",['angularUtils.directives.dirPagination']);

分页我们使用dir-paginate指令，在tr标签中添加dir-paginate

<tr dir-paginate="event in events|orderBy:['columnid', 't']:true | itemsPerPage: 5">

在您页面的任何位置或您想要的任何位置添加以下给定代码。

<dir-pagination-controls
                max-size="5"
                direction-links="true"
                boundary-links="true" >
</dir-pagination-controls>

Answer 5

是的，我们可以根据数据创建自己的逻辑。

Displaying {{ pageSize * (currentPage-1)+$index+1 }} - {{ pageSize*currentPage }} of {{ perman.length }}

dir-pagination directive angularjs : 有什么方法可以获取分页当前页面的所有记录吗？

dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?

pagination

angularjs

angularjs-ng-repeat

dirpagination