O foco da paginação dos AngularJS se reflete no uso de filtros. Este filtro também não é complicado.
Primeiro, coloque o código HTML:
<! Docttype html> <html ng-app = "DemoApp"> <head> <meta charset = "utf-"> <meta name = "viewport" content = "width = dispositivo-width"> <title> Demo </title> <link Rel = "StyleSheet" href = "Demo.cssse"> ng-CONTROLLER = "democtrl"> <div> <ul> <li ng-repeat = "frases em demolistas []. Nome | Paging: CurrentPage*listsPage | Limitto: listsPage <! ng-click = "prevpage ()"> página anterior </a> <a ng-class = "{true: 'currentStep', false: 'step'} [num == currentPage]" ng-repeat = "num em pagenum" ng-click = "setPage (num)> {{num+}}} </aa> ng-click = "nextPage ()"> Próxima página </a> </div> </div> <script src = "angular.min.js"> </script> <!-Apresente seu arquivo angularjs-> <script src = "Demo.js"> </script> </body> </html>NG-Class é usado aqui. Quando a página atual da página atual é igual ao número de número da página, o estilo CurrentStep é exibido e, quando não é igual, o estilo de etapa é exibido.
O código -chave está em 13 linhas. Quando o NG-REPEAT simula os dados, o filtro é chamado de paginação e um limite de filtro angular.
Depois, há o código CSS, não há nada a dizer, principalmente para ajustar o estilo. Lembre-se de adicionar dois estilos na classe NG.
Ul> li {estilo de listar: nenhum; largura: px; altura: px; borda: px sólido #caf; margem-fundo: px; preenchimento-left: px;}. nextlink, .Prevlink {font-size: px; nenhum; fundo: #fff; flutuador: esquerda; cursor: ponteiro;} a.prevlink: mouse, a.nextlink: mouse {background: #aaa! importante; cor: #ffff! importante; cursor: ponteiro;}. etapa {exibir: bloco; hight: px; altura; px; borda sólida;} px; font-tamanho: px; flutuação: esquerda; margem: px; estilo de lista: nenhum; cursor: ponteiro;}. px; estilo de lista: nenhum; cursor: ponteiro;}Finalmente, é JS
var demoApp = angular.module('demoApp',[]);demoApp.filter('paging',function(){ //paging filter return function(lists,start){ //Two parameters lists are the raw data of your ng-repeat in html:// start, that is, the parameters passed after paging, that is, currentPage*listsPerPagereturn lists.slice (start); Desenvolvedor. $ SCOPE.Demolistas []. Nome.Length; i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentpage =; páginas} $ scope.prevpage = function () {// Clique na função executada na página anterior se ($ scope.currentpage>) {$ scope.currentpage-;}} $ scope.nextpage = function () {// clique na função $ scope.pages-) {$ scope.currentpage ++;}}}]);Quero dizer que o pagenum que você gera começa em 0, mas os números de página reais começam desde o início, é por isso que as 18 linhas no HTML são Num +1.
O conteúdo acima é o código que o AngularJS implementa a função de paginação sem elipsis introduzida pelo editor. Espero que possa ajudá -lo. Se você quiser saber mais sobre o AngularJS, preste atenção no site do Wulin.com!