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>ID</td><td>FirstName</td><td>LastName</td><td>Status</td><td>Address</td></tr></thead><tbody><ttr ng-repeat="emp in persons "> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javaScript"> var app = angular.module ('DemoApp', ['tm.pagination']; postdata = {pageIndex: $ scope.paginationconf.currentPage, pageSize: $ scope.paginationconf.ItemsperPage} BusinessService.List (Postdata) .Success (Funktion (Antwort) {$ scope.paginationconf.totalitems = response. Grundlegende Parameter $ scope.paginationconf = {currentPage: 1, itemSperpage: 5};/******************************************************************************** getrennt werden zwei Hintergrundereignisse ausgelöst. ($ http) {var list = function = function (Postdata) {return $ http.post ('/Mitarbeiter/getAllEPOPOPLYEE', Postdata);} return {list: function (postdata) {return list (postdata);}}]); </script>); </script>Der obige Inhalt ist der Beispielcode, den der Editor Ihnen zur Implementierung der Paging -Funktion basierend auf AngularJS vorstellt. Ich hoffe, es wird für alle hilfreich sein!