El enfoque de paginación de AngularJS se refleja en el uso de filtros. Este filtro tampoco es complicado.
Primero, pon el código HTML:
<! DocType html> <html ng-app = "deloApp"> <head> <meta charset = "utf-"> <meta name = "viewport" content = "width = dispositivo-width"> <title> demo </title> <link rel = "stylesheet" href = "damo.Css"> </head> <body> <body <shival> ng-Controller = "Democtrl"> <div> <ul> <li ng-depheat = "oraciones en demolistas []. Nombre | Paging: CurrentPage*ListSperPage | Limitto: ListSperPage"> {{oraciones}} </li> <!-ng-depeat generate dinámicamente datos simulados-> <//> <div> <div> <div> <div> <div> <div> <div> <div> ng-click = "prevpage ()"> página anterior </a> <a ng-class = "{true: 'currentstep', false: 'step'} [num == currentPage]" ng-repeat = "num en pageNum" ng-click = "setPage (num)"> {{num+}}}} </a> <!-ng-speat dinamical ng-chick = "nextPage ()"> Página siguiente </a> </div> </div> <script src = "angular.min.js"> </script> <!-Introduzca su archivo AngularJS-> <script src = "demo.js"> </script> </body> </html>La clase NG se usa aquí. Cuando la página actual actual es igual al número de número de página, se muestra el estilo actual y cuando no es igual, se muestra el estilo de paso.
El código clave está en 13 líneas. Cuando Ng-Repeat simula datos, el filtro se llama Paging y un limitto de filtro angular.
Luego está el código CSS, no hay nada que decir, principalmente para ajustar el estilo. Recuerde agregar dos estilos en clase Ng.
ul>li{list-style:none;width:px;height:px;border:px solid #CAF;margin-bottom:px;padding-left:px;}.nextLink,.prevLink{font-size: px;line-height: px;height: px;border: solid px #aaa;color: #;padding: px;margin: px;list-style: none;background: #fff; float: izquierda; cursor: pointer;} a.prevlink: hover, a.nextlink: hover {fondo: #aaa! importante; color: #ffff! IMPORTANTE; cursor: pointer;}. Step {display: block; line-height: px; altura: px; border: sólido px #aaa; color: #; fondo: #ffff; almo px; float: izquierda; margen: px; list-style: none; cursor: pointer;}. CurrentStep {border-color: #ffff; relleno: px; color: #f; font-weight: bold; float: izquierda; display: bloque; line-height: px; altura: px; padding: px; font-weise: px; float; marzo; margen: margen: px; altura: px; padding: px; font-tise: px; float; marzo; marzo: margen: px; altura: px; padding: px; font-tise: px; float; marzo; margen: margin ninguno; cursor: puntero;}Finalmente, es JS
var demoApp = Angular.module ('DemoApp', []); DemoApp.Filter ('Paging', function () {// Paging Filter Devuelve Función (Lists, Start) {// Dos parámetros listas son los datos sin procesar de su ng-repeat en html: // start, es decir, los parámetros pasados después de la paginación, que es, enchufepage*listspage*listsperpager. // segmento los datos originales según el inicio};}); deloApp.Controller ('Democtrl', ['$ Scope', function ($ Scope) {// Page Controller $ scope.demolists = [// Simule Data {Nombre: ['Hola Mundo', Hello World Again ',' Por qué digo hola mal ',' No sé el motivo ',', 'tal vez porque soy un desarrollador. Esto ',' por qué digo gracias ',' porque esto no tiene nada que ver con sus angulares que estudian ',' estas son solo oraciones de demostración '.,' no tiene ningún significado especial ',' y todavía se tarda el tiempo en leer esta fila por fila ',' ¿qué podría decir? ',' bien.Aky. $ scope.demolists []. name.length; i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentPage =; páginas} $ scope.prevpage = function () {// Haga clic en la función ejecutada en la página anterior if ($ scope.currentPage>) {$ scope.currentPage-;}} $ scope.nextpage = function () {// Haga clic en la función ejecutada en la página siguiente si ($ scope.CurrentPage < $ scope.pages-) {$ scope.currentPage ++;}}}]);Quiero decir que el pageno que genera comienza desde 0, pero los números de página reales comienzan desde el principio, por lo que las 18 líneas en HTML son NUM +1.
El contenido anterior es el código que el AngularJS implementa la función de paginación sin elipsis introducidos por el editor. Espero que pueda ayudarte. Si desea saber más sobre AngularJS, ¡preste atención al sitio web de Wulin.com!