Le foyer de pagination d'AngularJS se reflète dans l'utilisation des filtres. Ce filtre n'est pas non plus compliqué.
Tout d'abord, mettez le code HTML:
<! Doctype html> <html ng-app = "DemoApp"> <éad> <meta charset = "utf -"> <meta name = "Viewport" contenu = "width = device-width"> <title> démo </title> <link rel = "Stylesheet" href = "Demo.css"> </head> </ body> Ng-Controller = "DemoCtrl"> <div> <ul> <li ng-repeat = "Sentens in Demolists []. Nom | Paging: CurrentPage * ListSperPage | LIMMTTO: ListSperPage"> {{Sentendies}} </ li> <! - Ng-Repeat Generate Generate Simuled Data -> </ Ul> ng-click = "prevpage ()"> page précédente </a> <a ng-class = "{true: 'currentStep', false: 'Step'} [num == currentpage]" ng-repeat = "num in pagenum" ng-click = "setPage (num)"> {{num +}} </a> <! ng-click = "nextPage ()"> page suivante </a> </div> </div> <script src = "angular.min.js"> </ script> <! - Introduisez votre fichier angularjs -> <script src = "Demo.js"> </ script> </ body> </html>La classe NG est utilisée ici. Lorsque la page actuelle CurrentPage est égale au numéro de page NUM, le style actuel est affiché et lorsqu'il n'est pas égal, le style de pas s'affiche.
Le code clé est en 13 lignes. Lorsque Ng-Repeat simule les données, le filtre est appelé pagination et une limite de filtre angulaire.
Ensuite, il y a le code CSS, il n'y a rien à dire, principalement pour ajuster le style. N'oubliez pas d'ajouter deux styles dans la classe NG.
Ul> li {style list: Aucun; largeur: px; hauteur: px; bordure: px solide #caf; margin-boot: px; padding-left: px;}. nextlink, .prevlink {Font-size: px; line-height: px; hauteur: px; border: solide px #aaa; Aucun; arrière-plan: #fff; float: gauche; curseur: pointeur;} a.prevlink: hover, a.nextlink: hover {background: #aaa! importante; couleur: #ffff! importante; curseur: pointeur;}. Step {affichage: bloc; line-height: px; hauteur: px; border: solid px #aa; PX; FONT-SIZE: PX; Float: gauche; marge: PX; style liste: Aucun; Cursor: Pointer;}. CurrentStep {Border-Color: #ffff; Padding: Px; Couleur: #f; Font-Weight: Bold; Float: Left; FONT px; style liste: aucun; curseur: pointeur;}Enfin, c'est JS
var DemoApp = angular.module ('DemoApp', []); DemoApp.Filter ('Paging', function () {// PAGINY Filter Return Fonction (Listes, Start) {// Deux listes de paramètres sont les données brutes de votre pagination, lists.slice (start); Développeur. ',' Merci d'avoir lu ceci ',' Pourquoi je vous remercie ',' Parce que ce truc n'a rien à voir avec vos études angularjs '', "Ce ne sont que des phrases de démonstration.", "Ne pourriez pas dire? $ scope.Demolistes []. Nom.length; i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentPage =; pages} $ scope.prevpage = function () {// Cliquez sur la fonction exécutée sur la page précédente if ($ scope.currentPage>) {$ scope.currentPage -;}} $ scope.nextpage = function () {// cliquez sur la fonction exécutée sur la page suivante si ($ Scope.currentPage < $ scope.pages -) {$ scope.currentPage ++;}}}]);Je tiens à dire que le pagenum que vous générez commence à partir de 0, mais les véritables numéros de page commencent depuis le début, c'est pourquoi les 18 lignes en HTML sont num +1.
Le contenu ci-dessus est le code selon lequel l'angularjs implémente la fonction de pagination sans ellipsis introduit par l'éditeur. J'espère que cela peut vous aider. Si vous voulez en savoir plus sur AngularJS, veuillez prêter attention au site Web Wulin.com!