Paginação em uma lista usando ng-repeat

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}}
Show 5 per page Show 10 per page Show 15 per page Show 20 per page

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:

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:

 
  • {{item}}
{{currentPage+1}}/{{numberOfPages()}}