Préface
Avant d'apprendre une langue, il doit y avoir des besoins commerciaux pour vous conduire pour l'apprendre. Bien sûr, NG ne fait pas exception. Avant d'apprendre NG, la première démo que je voulais faire était de mettre en œuvre la pagination basée sur NG. En plus de l'idée informatique de base, il s'agit d'utiliser des instructions pour le encapsuler dans un plug-in et de le référencer directement dans la page de liste qui nécessite une pagination.
Plugin
Lorsque je résume le plugin de pagination, j'ai implémenté plusieurs méthodes en général, et j'ai finalement trouvé un plug-in encapsulé par un ami (http://www.miaoyueyue.com/archives/813.html). Je sentais que c'était assez bon, alors j'ai lu son code source et je l'ai utilisé directement dans le projet.
Principes et instructions pour une utilisation
1. Le code source du plug-in est principalement implémenté en fonction de la directive angulaire.
2. Le point clé lorsque l'appel est la fonction de traitement de la demande d'arrière-plan, c'est-à-dire pour obtenir des données à partir de l'arrière-plan.
3. Le plug-in a deux paramètres clés: CurrentPage, ItemsPerpage, numéro de page actuel et numéro d'enregistrement par page.
4. Après implémentation de l'appel de la méthode, nous devons soumettre à nouveau l'arrière-plan pour obtenir les données de numéro de page correspondantes en fonction de chaque clic sur le numéro de page du plug-in Paging. Dans le numéro de page de l'appel, j'ai utilisé $ watch pour surveiller. Lorsque je l'ai utilisé pour la première fois, j'ai mis la fonction d'appel dans l'echange du plug-in, mais j'ai trouvé que l'arrière-plan sera déclenché deux fois à chaque fois. Cet endroit a besoin d'attention.
5. Je résume l'arrière-plan de la demande dans une couche de service, puis je l'appelle dans le contrôleur, qui est également conforme à l'idée MVC.
Diagramme de reproduction
Code d'appel
<div ng-app = "DemoApp" ng-Controller = "DemoController"> <s tablel> <Thead> <Tr> <Td> ID </td> <Td> FirstName </td> <Td> LastName </ Td> Status </ Td> <Td> Address </td> </p> </thad> dans Personnes "> <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 / javascrip postdata = {pageIndex: $ scope.paginationconf.currentPage, pagesize: $ scope.paginationconf.itemsperpage} businesservice.list (postdata) .success (function (réponse) {$ scope.paginationconf.totalitems = réponse.Count; $ scope.persons = response.items;});}//Configure paging basic parameters $scope.paginationConf = {currentPage: 1,itemsPerPage: 5};/****************************************************************************************************************** When the page number and page record number change, Surveillance de la requête en arrière-plan Si CurrentPage et les éléments Perpage sont surveillés séparément, deux événements de fond seront déclenchés. app.factory ('businesservice', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/ employee / getAllemployee', postdata);} return {list: function (postdata) {return list (postdata);}}});Le contenu ci-dessus est l'exemple de code que l'éditeur vous introduit pour implémenter la fonction de pagination basée sur AngularJS. J'espère que ce sera utile à tous!