Prefácio
Antes de aprender qualquer idioma, deve haver negócios precisam levá -lo a aprendê -lo. Claro, Ng não é exceção. Antes de aprender NG, a primeira demonstração que eu queria era implementar a paginação com base no NG. Além da ideia básica de computação, é usar instruções para encapsulá-la em um plug-in e referenciá-la diretamente na página de lista que precisa de paginação.
Plugin
Ao encapsular o plug-in de paginação, implementei vários métodos em geral e finalmente encontrei um plug-in encapsulado por um amigo (http://www.miaoyueyue.com/archives/813.html). Eu senti que era muito bom, então li o código -fonte dele e o usei diretamente no projeto.
Princípios e instruções para uso
1. O código-fonte do plug-in é implementado principalmente com base na diretiva angular.
2. O ponto -chave quando chama é a função de processamento de solicitação de plano de fundo, ou seja, para obter dados do plano de fundo.
3. O plug-in possui dois parâmetros principais: CurrentPage, ItensPage, número atual da página e número de registro por página.
4. Após a implementação da chamada do método, precisamos reenviar o plano de fundo para obter os dados do número de página correspondentes com base em cada clique no número da página do plug-in de paginação. Na página Número da chamada que usei $ relógio para monitorar. Quando o usei pela primeira vez, coloquei a função de chamada no cenário do plug-in, mas descobri que o plano de fundo será acionado duas vezes a cada vez. Este lugar precisa de atenção.
5. Encapsulei o plano de fundo da solicitação em uma camada de serviço e depois a ligo no controlador, que também está alinhado com a ideia do MVC.
Diagrama de reprodução
Código de chamada
<div ng-app = "DemoApp" ng-controller = "Democontroller"> <table> <Thead> <tr> <td> id </td> <td> primeiro nome </td> <td> SaltName </td> <dd> status </td> <Td> </tdbody ng-repeat = "Emp in pessoas "> <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']); App.Controller ('Democontroller', ['$ scope', 'BusinessSex', funclor ($ SCUPS ($ SCUPSE ($ SCOPE ($ SCOPE ($ Scope '); PostData = {PageIndex: $ scope.paginationConf.CurrentPage, Pagesize: $ scope.paginationconf.itemsperpage} BusinessService.list (PostData) .Success (função (resposta) {$ scope.paginConf.totalitems = A resposta.count; Response.Items;});} // Configure os parâmetros básicos do paging $ scope.paginationConf = {currentPage: 1, ItensPage: 5};/******************************* Alteração do número, Monitoramento da consulta de fundo Se a página de current e itens é monitorada separadamente, dois eventos de fundo serão acionados. App.Factory ('BusinessService', ['$ http', function ($ http) {var list = function (PostData) {return $ http.post ('/funcionário/getallemployee', PostData);} return {list: function) {list (postData);O conteúdo acima é o código de exemplo que o editor apresenta para você implementar a função de paginação com base no AngularJS. Espero que seja útil para todos!