Der Paginationsfokus von AngularJs spiegelt sich in der Verwendung von Filtern wider. Dieser Filter ist auch nicht kompliziert.
Setzen Sie zunächst den HTML -Code ein:
<! DocType html> <html ng-App = "DemoApp"> <head> <meta charset = "utf-"> <meta name = "viewPort" content = "width = Geräte-width"> <title> Demo </title> <link ng-controller="demoCtrl"><div><ul><li ng-repeat="sentences in demoLists[].name | paging:currentPage*listsPerPage | limitTo:listsPerPage">{{sentences}}</li> <!-- ng-repeat Dynamically generate simulated data --></ul></div><div><a ng-click="prevPage()">Previous page</a><a ng-class="{true:'currentStep',false:'step'}[num==currentPage]" ng-repeat="num in pageNum" ng-click="setPage(num)">{{num+}}</a> <!-- ng-repeat Dynamically generate page numbers--><a ng-klick = "nextPage ()"> nächste Seite </a> </div> </div> <script src = "Angular.min.js"> </script> <!-Führen Sie Ihre AngularJS-Datei vor-> <script src = "Demo.js"> </script> </body> </html>> </html>Die NG-Klasse wird hier verwendet. Wenn die aktuelle Seite aktuelle Seite gleich der Seite der Seitenzahl ist, wird der CurrentStep -Stil angezeigt, und wenn er nicht gleich ist, wird der Schrittstil angezeigt.
Der Schlüsselcode ist in 13 Zeilen. Wenn die NG-Wiederholung Daten simuliert, wird der Filter als Paging und ein Winkelfilterlimitto bezeichnet.
Dann gibt es den CSS -Code, es gibt nichts zu sagen, hauptsächlich, um den Stil anzupassen. Denken Sie daran, zwei Stile in der NG-Klasse hinzuzufügen.
ul> li {Listenstil: Keine; Breite: px; Höhe: px; Border: px solide #caf; Rand-Bottom: px; padding-links: px;}. NextLink, .prevlink {Schriftgröße: Px; Line-Height: px; margin: px; marga borle: solide px: lilt: ##aa; farb: # # # # # # # # # # # # # #; Keine; Hintergrund: #fff; float: links; Cursor: Zeiger;} a.prevlink: Hover, A.NextLink: Hover {Hintergrund: #aaa! px;float: left;margin: px;list-style: none;cursor: pointer;}.currentStep{border-color: #ffff;padding: px;color: #f;font-weight: bold;float: left;display: block;line-height: px;height: px;padding: px;font-size: px;float: left;margin: px;list-style: none;cursor: Zeiger;}Schließlich ist es JS
var DemoApp = angular.module ('DemoApp', []); DemoApp.filter ('Paging', Funktion () {// Paging-Filter-Rückgabefunktion (Listen, Start) {// Zwei Parameterlisten sind die Rohdaten Ihres ng-repeat in html: // start, die Parameter, die nach dem Pagen übergeben wurden. lists.slice (start); Entwickler. ',' Danke, dass du das gelesen hast. ',' Warum ich danke ',' Denn dieses Zeug hat nichts mit deinem Angularjs zu tun, das studiert ',' das sind nur Demo -Sätze. ',' Habe keine besonderen Bedeutungen. ', und du nimmst immer noch Zeit, diese Reihe zu lesen', 'Was könnte ich sagen?' $ scope.Demolists [] name.length; i =; i <$ scope.pages; i ++) {$ scope.pagenum Seiten} $ scope.prevpage = function () {// Klicken Sie auf die auf der vorherigen Seite ausgeführte Funktion if ($ scope.currentPage>) {$ scope.currentPage-;}} $ scope.nextPage = function () {// Klicken Sie auf die auf der nächsten Seite ausgeführte Funktion, wenn ($ scope.crent $ scope.pages-) {$ scope.currentPage ++;}}}]);Ich möchte sagen, dass das von Ihnen erzeugte Pagenum von 0 beginnt, aber die realen Seitenzahlen beginnen von Anfang an. Deshalb sind die 18 Zeilen in HTML Num +1.
Der obige Inhalt ist der Code, den der AngularJS die Paging -Funktion ohne vom Editor eingeführte Ellipse implementiert. Ich hoffe es kann dir helfen. Wenn Sie mehr über AngularJS erfahren möchten, achten Sie bitte auf die Website wulin.com!