Em seguida, o primeiro artigo "" Explicação detalhada de $ local e suas funções de serviço interno angularJs ", para aprender
Seção 2: Implementar o efeito da exibição da paginação
Em seguida, vamos ser invisíveis e definir as informações atuais da URL através do método do Setter de localização. Para melhorar a demonstração, neste exemplo relativamente completo, introduzi a tecnologia de vários escavadores do AngularJS, a transferência de dados entre controladores aninhados, herança de escopo, comunicação HTTP, variáveis de transferência intralink etc.
Primeiro, crie um modelo de página inicial
<! Doctype html> <html ng-app = "turnPageApp"> <head lang = "en"> <meta charset = "utf-8"> </title> <script src = "lib/angular.js"> </script> <script "" type = "text/css"> .TurnPageButtonarea {Background-Color: #f07a13; Largura: 500px; Altura: 30px; altura de linha: 30px; Alinhamento de texto: centro; margem: 10px automático; preenchimento: 20px; } botão {margem-direita: 20px; Largura: 100px; Altura: 30px; Size da fonte: 15px; } .pagenum {width: 50px; Altura: 23px; Alinhamento de texto: centro; } corpo {Font-Family: Microsoft Yahei; } h1 {text-align: Center; } .totalPages { color: #ffffff } </style></head><body ng-controller="indexController"><h1>AngularJS TurnPage By $location Service</h1><div ng-view></div><div> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type = "número" ng-model = "currentpage"> <button ng-click = "gotOpage ()"> go </button> <pan> total {{allPage}} páginas </span> </div> </body> </html>O layout da página é modificado com alguns estilos CSS simples.
Em seguida, defina alguns NGAPPs e controladores no elemento da página inicial.
No elemento div com o atributo ngview, os modelos incorporados em outros HTML.
Imediatamente abaixo, coloquei três botões, os dois primeiros são os botões de giro da página da página anterior e a próxima página; Uma caixa de entrada permite que o usuário insira o número da página que ele deseja pular e o botão ao lado serve como o botão de envio para o número da página. Depois de clicar, a página gira a página imediatamente.
Todos os três botões têm um atributo NGCLICK, indicando que, quando o usuário clicar no botão, a função correspondente será executada.
Antes de explicar o código JS do AngularJS, faça uma captura de tela para ver a estrutura do diretório do arquivo.
O index.html acima é dos dois exemplos anteriores, para que você possa ignorá -lo.
Para simplificar, coloquei todos os scripts no arquivo ruplay.html. Aqui está o código completo para este arquivo:
turnpage.html
<! Doctype html> <html ng-app = "turnPageApp"> <head lang = "en"> <meta charset = "utf-8"> </title> <script src = "lib/angular.js"> </script> <script "" type = "text/css"> .TurnPageButtonarea {Background-Color: #f07a13; Largura: 500px; Altura: 30px; altura de linha: 30px; Alinhamento de texto: centro; margem: 10px automático; preenchimento: 20px; } botão {margem-direita: 20px; Largura: 100px; Altura: 30px; Size da fonte: 15px; } .pagenum {width: 50px; Altura: 23px; Alinhamento de texto: centro; } corpo {Font-Family: Microsoft Yahei; } h1 {text-align: Center; } .totalPages { color: #ffffff } </style></head><body ng-controller="indexController"><h1>AngularJS TurnPage By $location Service</h1><div ng-view></div><div> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type = "número" ng-model = "currentPage"> <botão ng-click = "goToPage ()"> go </botão> <pan> total {{allPage}} páginas </span> </div> <cript> // instanciam o objeto NGAPP do próprio usuário. Como o mecanismo de roteamento é usado aqui, o módulo NGROUTE é escrito em injeção de dependência var turnPageApp = angular.module ('turnPageApp', ['ngroute']); /* Defina modelos e controladores diferentes para diferentes URLs. Como apenas um modelo é usado neste exemplo, existe apenas uma situação de roteamento encontrada, a saber "/id" */turnPageApp.config (['$ routeProvider', function ($ routeProvider) {$ routeProvider .when ('/: id', »`///ugester) {$ RoutePrider. 'StudentController'}) .OTHUSTIVO ({RedirectTo: '/1'}); // Se o URL não puder ser correspondido, pule para a primeira página diretamente}]); // Registre o controlador pai IndexController. Como o valor do controlador filho no modelo precisa ser passado para o controlador pai, o domínio raiz $ Rootscope é necessário para ajudar e o objeto de domínio raiz precisa ser passado na função de retorno. // Moreover, this example implements page turn based on the operation of url, so this built-in $location service must be passed in turnPageApp.controller('indexController', function ($rootScope, $scope, $location) { //Define the function $scope.previous = function () { //Get the path from the browser's address bar, that is, the content after the pound sign in TurnPage.html#/1: "/1" // Em seguida, retire os caracteres após a barra através da função de silce javascript e converta -o em números. Primeira página '); $ rootscope.AllPage) {alerta ('Esta é a última página'); $ scope.CurrentPage; $ Rootscope e seu atributo AllPage aparecem aqui. Jump. // Este é o controlador da página do modelo incorporada na página inicial. // Como a comunicação entre o domínio filho e o domínio pai exige a ajuda do domínio raiz, o objeto $ Rootscope é passado na dependência // scope $ é o próprio escopo do modelo, que herda o escopo gerado pelo servidor de controlador pai // no modelo, precisa interagir com os arquivos do servidor. Para controlar a complexidade da instância, escrevi diretamente um arquivo JSON e fiz alguns dados falsos. // Aqui $ RouteParams é um objeto, e há uma propriedade nesse objeto, que é o id (/: id) que vimos na função config () antes. Este ID é uma variável, qual é o caminho na barra de endereços e qual é o ID. O valor do ID precisa ser obtido através do objeto $ RouteParams. TurnPageApp.Controller ('StudentController', ['$ Rootscope', '$ SCOPE', '$ HTTP', '$ ROUTEPARAMS', função ($ RootsCope, $ SCOPE, $ HTTP, MATEPARAMS A SUCTILHO AO FUNCIONS A: // O Método Get de $ HTTP e Remote File File AMM A. obtido no arquivo remoto. é uma matriz e o subscrito é iniciado em 0, você precisa subtrair 1 scope.Student = Data [$ RouteParams.id - 1]; O subdomínio não é atribuído diretamente, os atributos do subdomínio herdarão o valor dos atributos do domínio pai com o mesmo nome; O atributo AllPage neste elemento herdará o valor do atributo AllPage do mesmo nome do escopo dos pais, que exibe indiretamente o número total de páginasView/student.html
<tabela CellPacing = "0"> <tr> <td> id </td> <td> {{student.id}} </td> </tr> <tr> <td> nome </td> <td> {{student.name}} </td> </tr> <tr> <t- sexo </td> sexo </td> <td>{{student.sex}}</td> </tr> <tr> <td>Age</td> <td>{{student.age}}</td> </tr> <tr> <td>Courses</td> <td> <ul> <li ng-repeat="course in student.courses">{{course}}</li> </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> cursos </td> <td> <ul> <li ng-repeat = "Curso em Student.courses"> {{Course}} </li> </li> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> cursos </td> <td> <ul> <li ng-repeat = "em Student.coures </{{curso </ type = "text/css"> tabela {borda: sólido 1px #000000; margem: 0px automático; } td {preenchimento: 10px 10px 10px 20px; margem: 0px; Fronteira: Solid 1px #000000; } tr {margin: 0px; preenchimento: 0px; } .title {background-color: #207EF0; Alinhamento de texto: centro; Cor: #ffffff; } ul {estilo de listar: nenhum; margem: 0px; preenchimento: 0px; } li {float: esquerda; margem: 10px; } </style>dados/alunos.json
[ { "id": 1, "name": "Frank Li", "sex": "male", "age": "30", "courses": [ "HTML", "CSS", "Javascript", "Java", "PHP", "MySQL", "Ubuntu", "MongoDB", "NodeJS", "AngularJS", "Photoshop", "LESS", "Bootstrap" ] }, { "id": 2, "name": "Cherry", "sex": "female", "age": "27", "courses": [ "Anderson's Fairy Tales", "Pride and Prejudice", "Vanity Fair", "Oliver Twist" ] }, { "id": 3, "name": "John Liu", "sex": "male", "age": "29", "cursos": ["Introdução à arte", "esboço", "composição", "escultura"]}]]É assim que era no começo. O caminho padrão na barra de endereços é /1, portanto, as informações do primeiro aluno são exibidas diretamente. O número total de páginas também pode ser obtido.
O efeito depois de clicar no botão anterior. Não posso mais virar a página
O efeito ao clicar no botão Avançar quando na página 4. Não é possível voltar as páginas.
Não há problema em girar páginas dentro do intervalo de número da página!
Dado o comprimento, não demonstrarei que o número da página inserido está fora do intervalo. A captura de tela acima é o efeito de inserir o intervalo correto dos números de página e clicar no botão GO.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.