Question

我正在使用@michaelbromley的dir-pagination指令。我想获得当前指令页面上的所有记录。有没有办法做到这一点？

dir-paginate pic

以下是链接：dir-pagination，因此我需要从100到96的5 records的集合。有没有快速的方法可以做到这一点？

我尝试了几件但没有工作。

Answer 1

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

/**
 * Author: Eric Ferreira <http://stackoverflow.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。

在您的特定情况下，您将使用此行（在模块中添加/要求过滤器之后）而不是您的分页：

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

我继续前进并分叉你的傻瓜以显示它也在工作：

http://plnkr.co/edit/uC3RiC?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);
  }
}

我没有经过昂贵的测试，但一般原则应该有效。在我看来这有点hacky，但值得知道作为Rathish提供的答案的替代。

Answer 3

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

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

Answer 4

您可以使用数组切片方法，因为您已经可以访问大型数组，知道您所在的页码并知道每页的元素数。您可以在下面的代码中重用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 5

从此处下载dirPagination.js。
现在将 dirPagination.js 添加到您的网页。
在您的模块中添加 angularUtils.directives.dirPagination ，就像这样

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

我们使用dir-paginate指令进行分页，在dir-paginate代码中添加tr

<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>

dir-pagination指令angularjs：有什么办法可以在分页中获取当前页面的所有记录吗？

5 个答案: