Paginação em uma lista usando ng-repeat DoCow
angularjs javascript paginate
Estou tentando adicionar páginas à minha lista. Eu segui o tutorial AngularJS, aquele sobre smartphones e estou tentando mostrar apenas um certo número de objects. Aqui está o meu arquivo html:
Search:  Sort by:  Alphabetical Newest  You selected the phones to be ordered by: {{orderProp}}
Eu adicionei uma tag de seleção com alguns valores para limitar o número de itens que serão exibidos. O que eu quero agora é adicionar a paginação para exibir os próximos 5, 10, etc.
Eu tenho um controlador que funciona com isso:
function PhoneListCtrl($scope, Phone){ $scope.phones = Phone.query(); $scope.orderProp = 'age'; $scope.limit = 5; }
E também tenho um módulo para recuperar os dados dos arquivos json.
angular.module('phonecatServices', ['ngResource']). factory('Phone', function($resource){ return $resource('phones/:phoneId.json', {}, { query: {method: 'GET', params:{phoneId:'phones'}, isArray:true} }); });
Se você não tem muitos dados, você pode definitivamente fazer paginação apenas armazenando todos os dados no navegador e filtrando o que está visível em um determinado momento.
Aqui está um exemplo simples de paginação: http://jsfiddle.net/2ZzZB/56/
Esse exemplo estava na lista de violinos no wiki do github angular.js, que deve ser útil: https://github.com/angular/angular.js/wiki/JsFiddle-Examples
EDIT: http://jsfiddle.net/2ZzZB/16/ para http://jsfiddle.net/2ZzZB/56/ (não mostrará "1 / 4.5" se houver 45 resultados)
Acabei de fazer um JSFiddle que mostra paginação + pesquisa + ordem em cada coluna usando o código Build with Twitter Bootstrap : http://jsfiddle.net/SAWsA/11/
Eu construí um módulo que torna a paginação em memory incrivelmente simples.
Ele permite que você pagine simplesmente substituindo ng-repeat por dir-paginate , especificando os itens por página como um filtro canalizado e, em seguida, soltando os controles onde desejar, na forma de uma única diretiva,
Para pegar o exemplo original de Tomarto, ficaria assim:
Não há necessidade de nenhum código de paginação especial no seu controlador. Tudo é tratado internamente pelo módulo.
Demonstração: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Fonte: dirPagination do GitHub
Eu sei que este segmento é antigo agora, mas estou respondendo para manter as coisas um pouco atualizadas.
Com o Angular 1.4 e superior, você pode usar diretamente o filtro limitTo, que além de aceitar o parâmetro de limit também aceita um parâmetro begin .
Uso: {{ limitTo_expression | limitTo : limit : begin}} {{ limitTo_expression | limitTo : limit : begin}}
Então, agora você pode não precisar usar qualquer biblioteca de terceiros para obter algo como paginação. Eu criei um violino para ilustrar o mesmo.
Confira esta diretiva: https://github.com/samu/angular-table
Ele automatiza muito a sorting e paginação e lhe dá liberdade suficiente para personalizar sua tabela / lista como você quiser.
Aqui está um código de demonstração onde há paginação + filtragem com AngularJS:
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); } });