Отображение разбиения на страницы с использованием ng-repeat

Ответ 1

Если у вас слишком мало данных, вы можете определенно сделать разбиение на страницы, просто сохранив все данные в браузере и отфильтровывая видимые в определенное время.

Вот пример простой страницы: http://jsfiddle.net/2ZzZB/56/

Этот пример был в списке скриптов в wiki angular.js github, который должен быть полезен: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT: http://jsfiddle.net/2ZzZB/16/ в http://jsfiddle.net/2ZzZB/56/ (не будет отображаться "1/4.5", если есть 45 результатов)

Ответ 2

Я только что сделал JSFiddle, который показывает разбиение на страницы + поиск + порядок по каждому столбцу, используя Построить с помощью Twitter Загрузочный код: http://jsfiddle.net/SAWsA/11/

Ответ 3

Я создал модуль, который делает разбиение на страницы в памяти невероятно простым.

Это позволяет вам разбивать на страницы просто заменяя ng-repeat на dir-paginate, указывая элементы на странице как фильтр с каналами, а затем отбрасывая элементы управления везде, где вам нравится, в форме одной директивы, <dir-pagination-controls>

Чтобы взять оригинальный пример, заданный Tomarto, он будет выглядеть так:

<ul class='phones'>
    <li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'>
            <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
            <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
    </li>
</ul>

<dir-pagination-controls></dir-pagination-controls>

В вашем контроллере нет необходимости использовать какой-либо специальный код разбивки на страницы. Все это обрабатывается модулем.

Демо: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Источник: dirPagination of GitHub

Ответ 4

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

С помощью Angular 1.4 и выше вы можете напрямую использовать limitTo фильтр, который помимо принятия параметра limit также принимает begin.

Использование: {{ limitTo_expression | limitTo : limit : begin}}

Итак, теперь вам может не понадобиться использовать стороннюю библиотеку для достижения чего-то вроде разбивки на страницы. Я создал fiddle, чтобы проиллюстрировать это.

Ответ 5

Ознакомьтесь с этой директивой: https://github.com/samu/angular-table

Он автоматически автоматизирует сортировку и разбивку на страницы и дает вам достаточно свободы для настройки таблицы/списка, но вы хотите.

Ответ 6

Вот демо-код, где есть разбиение на страницы + Фильтрация с помощью AngularJS:

https://codepen.io/lamjaguar/pen/yOrVym

JS:

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

// alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
// alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)
     /* 
       // manual filter
       // if u used this, remove the filter from html, remove above line and replace data with getData()

        var arr = [];
        if($scope.q == '') {
            arr = $scope.data;
        } else {
            for(var ea in $scope.data) {
                if($scope.data[ea].indexOf($scope.q) > -1) {
                    arr.push( $scope.data[ea] );
                }
            }
        }
        return arr;
       */
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the 
  // first pagination after each 
  // filtering
$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,
//let make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>