Разбивка на страницы с помощью ng-repeat
Я пытаюсь добавить страницы в свой список. Я следовал учебному пособию по AngularJS, посвященному смартфонам, и стараюсь отображать только определенное количество объектов. Вот мой HTML-файл:
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span2'>
Search: <input ng-model='searchBar'>
Sort by:
<select ng-model='orderProp'>
<option value='name'>Alphabetical</option>
<option value='age'>Newest</option>
</select>
You selected the phones to be ordered by: {{orderProp}}
</div>
<div class='span10'>
<select ng-model='limit'>
<option value='5'>Show 5 per page</option>
<option value='10'>Show 10 per page</option>
<option value='15'>Show 15 per page</option>
<option value='20'>Show 20 per page</option>
</select>
<ul class='phones'>
<li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo: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>
</div>
</div>
</div>
Я добавил тег выбора с некоторыми значениями, чтобы ограничить количество отображаемых элементов. Теперь я хочу добавить нумерацию страниц для отображения следующих 5, 10 и т. Д.
У меня есть контроллер, который работает с этим:
function PhoneListCtrl($scope, Phone){
$scope.phones = Phone.query();
$scope.orderProp = 'age';
$scope.limit = 5;
}
А также у меня есть модуль для извлечения данных из файлов JSON.
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
});
});
6 ответов
Если у вас не слишком много данных, вы можете сделать пагинацию, просто сохранив все данные в браузере и отфильтровав то, что видно в определенное время.
Вот простой пример разбиения на страницы: http://jsfiddle.net/2ZzZB/56/
Этот пример был в списке скрипок на вики-сайте angular.js, который должен быть полезен: https://github.com/angular/angular.js/wiki/JsFiddle-Examples
РЕДАКТИРОВАТЬ: http://jsfiddle.net/2ZzZB/16/ в http://jsfiddle.net/2ZzZB/56/ (не будет отображать "1/4.5", если есть 45 результатов)
Я только что создал JSFiddle, который показывает порядок разбивки на страницы + поиск + в каждом столбце, используя код начальной загрузки Build с Twitter: http://jsfiddle.net/SAWsA/11/
Я построил модуль, который делает нумерацию в памяти невероятно простой.
Это позволяет разбить на страницы, просто заменив ng-repeat с dir-paginateуказав элементы на странице в виде конвейерного фильтра, а затем отбросив элементы управления в любом месте в виде одной директивы, <dir-pagination-controls>
Чтобы взять оригинальный пример, заданный Томарто, он будет выглядеть так:
<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 GitHub
Я знаю, что эта ветка старая, но я отвечаю на нее, чтобы держать вещи в курсе.
С Angular 1.4 и выше вы можете напрямую использовать фильтр limitTo, который кроме принятия limit Параметр также принимает begin параметр.
Использование: {{ limitTo_expression | limitTo : limit : begin}}
Так что теперь вам не нужно использовать какую-либо стороннюю библиотеку для достижения чего-то вроде нумерации страниц. Я создал скрипку, чтобы проиллюстрировать то же самое.
Проверьте эту директиву: https://github.com/samu/angular-table
Он автоматизирует сортировку и разбивку на страницы и дает вам достаточно свободы для настройки таблицы / списка так, как вы хотите.
Вот демонстрационный код, где есть разбиение на страницы + фильтрация с 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's 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>