Implementierung von Paginierung auf AngularJs
Vorwort
Vor dem Erlernen einer Sprache muss es Geschäftsbedürfnisse geben, um Sie zu lernen. Natürlich ist Ng keine Ausnahme. Vor dem Erlernen von NG war die erste Demo, die ich tun wollte, Paging basierend auf NG. Zusätzlich zu der grundlegenden Computeridee werden Anweisungen verwendet, um sie in ein Plug-In zu integrieren und sie direkt auf der Listenseite zu verweisen, die Paging benötigt.
Plugin
Als ich das Paging-Plugin verkörperte, habe ich im Allgemeinen verschiedene Methoden implementiert und fand schließlich ein Plug-In, das von einem Freund eingekapselt war (http://www.miaoyueyue.com/archives/813.html). Ich fand es ziemlich gut, also las ich seinen Quellcode und verwendete ihn direkt im Projekt.
Prinzipien und Anweisungen zur Verwendung
1. Der Plug-in-Quellcode wird hauptsächlich basierend auf der Winkelrichtlinie implementiert.
2. Der Schlüsselpunkt beim Aufrufen ist die Funktion für die Verarbeitungsanforderung für Hintergrundanforderungen, dh Daten aus dem Hintergrund zu erhalten.
3. Das Plug-In verfügt über zwei Schlüsselparameter: aktuelle Seite, ElementSpage, aktuelle Seitennummer und Datensatznummer pro Seite.
4. Nach dem Implementieren des Methodenaufrufs müssen wir den Hintergrund erneut einstellen, um die entsprechenden Seitenzahlendaten basierend auf jedem Klick auf die Seitennummer des Paging-Plug-Ins zu erhalten. In der Seitennummer des Anrufs habe ich $ Watch verwendet, um zu überwachen. Als ich es zum ersten Mal benutzte, habe ich die Aufruffunktion in die Onchange des Plug-Ins gesteckt, aber ich stellte fest, dass der Hintergrund jedes Mal zweimal ausgelöst wird. Dieser Ort braucht Aufmerksamkeit.
5. Ich inkapitulieren den Anforderungshintergrund in eine Serviceschicht und rufe ihn dann im Controller auf, der ebenfalls mit der MVC -Idee übereinstimmt.
Reproduktionsdiagramm
Anrufcode
<div ng-app="DemoApp" ng-controller="DemoController"> <table> <thead> <tr> <td> <td>ID</td> <td>FirstName</td> <td>LastName</td> <td>Status</td> <td>Address</td> </tr> </thead> <tbody> <ttr ng-Repeat = "EM in persons"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td> <td> {{emp.status}}} </td <td> {{emp.address}} </td> </tr> </tbody> </table> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javaScript"> var App = Angular.module ('Demoapp', ['TM.Pagination']. App.Controller ('Democontroller', ['$ scope', 'businessService', function ($ scope, businessService) {var getAllaPlyee = function () {var postdata = {pageIndex: $ scope.paginationconf.curentPage, PageSize: $ scope.paginationconf.PaginationConf. BusinessService.List (Postdata) .Success (Funktion (Antwort) {$ scope.paginationconf.totalitems = response.count; $ scope.persons = iitems;}); /****************************************************************************************** When page numbers and page records change, monitoring background query If currentPage and itemsPerPage are monitored separately, two background events will be triggered. ***************************************************************/ $ scope. // Business Class App.Factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/Employee/GetAllEPLEYEE', postdata);Plugins und Demo -Downloads
http://yunpan.cn/cqehnlrpnkniq Access Passwort BE74
Die obigen sind die Informationen, die AngularJS die Paginierungsfunktion implementiert. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!