Директива dir-pagination angularjs: есть ли способ получить все записи текущей страницы в нумерации страниц?

Вот еще один возможный способ сделать это, не требующий дублирования логики из выражения 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);
  }
}

Дорого не проверял, но общий принцип должен работать. На мой взгляд, это немного хакерски, но это стоит знать в качестве альтернативы ответу, предоставленному Ратишем.

Я столкнулся с этой же проблемой, но ответы здесь не соответствовали моим потребностям (или, может быть, желаниям). Я решил решить эту проблему самостоятельно и остановился на создании фильтра, единственной целью которого является запись элементов, проходящих через него, в заданном свойстве на заданной цели. Я придумал это:

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

Да, мы можем создать собственную логику в соответствии с данными.

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

Вы можете использовать метод среза массива, поскольку у вас уже есть доступ к большому массиву, вы знаете, на каком номере страницы вы находитесь, и знаете количество элементов на странице. Для этого вы можете повторно использовать функцию 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="[email protected]" 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

1. Загрузите dirPagination.js отсюда.

2. Теперь включите dirPagination.js на свою страницу.

3. Добавьте angularUtils.directives.dirPagination в свой модуль следующим образом.

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

4. Мы используем директиву dir-paginate для разбиения на страницы, добавляем dir-paginate в тег tr

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

5. Добавьте приведенный ниже код в любом месте на вашей странице или в любом месте, где вы хотите.

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