Deixe -me primeiro apresentar brevemente os conceitos básicos de angular.js e bootstrap.
AngularJS é uma estrutura JavaScript. Ele pode ser adicionado às páginas HTML através da tag <Script>.
AngularJS estende HTML através de diretrizes e vincula dados ao HTML por meio de expressões.
O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
Recentemente, tenho aprendido angular.js e pratiquei muitas demos durante o processo de aprendizado. Aqui vou postar o formulário + paginação primeiro.
Vamos dar uma olhada no resultado final:
Devo dizer que o estilo de código angular.js é muito popular e dezenas de linhas de código implementam de forma clara e concisa as funções acima.
Primeiro de tudo, a fonte de dados da tabela vem do Server.js, clique para baixar. Obtenha o número e exiba -o na página.
1. A tabela é exibida através de NG-REPEAT, e o código é o seguinte:
<table> <tr> <th> ÍNDICE </S> <th ng-repeat = "(x, y) em itens [0]"> {{x}} </th> </tr> <tr ng-repeat = "X em itens"> <td> {{$ index + 1}}} </td> <t ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </table>$ index é o parâmetro padrão da repetição. O cabeçalho da coluna da tabela é o valor da chave em loop através da primeira linha da fonte de dados (JSON). Obviamente, se o bootstrap precisar especificar que a classe da tabela é a tabela de mesa.
2. A paginação também usa o NG-REPEAT. Devo dizer que Ng-repetição é uma instrução comum.
O código de paginação é o seguinte:
<NAV> <ul> <li> <a ng click = "anterior ()"> <pan> página anterior </span> </a> </li> <li ng-repeat = "Page no pagelist" ng-class = "{attive: isactivePage (Page)}"> <a ng-click = "selectPage (<)"> {{{{{ ng-click = "Next ()"> <pan> Próxima página </span> </a> </li> </ul> </avh>Aqui usamos a instrução de evento NG-Click. Também usado comando ng-classe
ng-class = "{Active: isactivePage (página)}"O código acima é o estilo selecionado para a paginação.
Esta tabela adiciona paginação à página é uma paginação falsa, que leva dados do back -end uma vez e exibe os dados filtrados do JSON através de diferentes paginação.
Código específico + comentários:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> Arquivo CSS-> <link rel = "Stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <yoy> #divmain {width: 500px; margin: 0%-the; 50px;}.pagination {right: 0px;position: absolute;top: -30px;}nav li {cursor: pointer;}</style><div id="divMain" ng-app="myApp" ng-controller="myCtrl"><table><tr><th>index</th><th ng-repeat="(x,y) in itens [0] "> {{x}} </th> </tr> <tr ng-repeat =" X in itens "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </td <td ng-bind =" x. ng-bind = "x.country"> </td> </tr> </ table> <mav> <ul> <li> <a ng-click = "anterior ()"> <pan> página anterior </span> </a> </li> <li ng-repeat = "Page em pagelist" "ng-class =" {Active: isactive > {{Page}} </a> </li> <li> <a ng-click = "next ()"> <pan> Próxima página </span> </a> </li> </ul> </mav> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.5.0-beta.0/angular.js"> </script> <cript> var app = angular.module ("myApp", []); app.controller ("myctrlle", scope ($ scope, $ htroller; {$ http.get ("service.js"). Então (function (resposta) {// fonte de dados $ scope.data = resposta.data.records; // número total de páginas $ scope.pagesize = 5; $ scope.Pages> 5? $ scope.pagesize)); // filtra os dados exibidos atuais na tabela pelo número atual de páginas} $ scope.items = $ scope.data.slice (0, $ scope.pagesize); // a matriz para a qual a paginação é repetida para (var i = 0; i <$ scope.newpages; 1);} // Imprima o índice de página atualmente selecionado $ scope.selectPage = function (página) {// não menos que 1 que o máximo if (página <1 || página> $ scope.pages) return; // o número máximo de páginas é exibido do que o Page (Page> 2) (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page> 2 Page (Page 1) (Page 1) é exibido (Page 1). 3); page);};//Set the currently selected page style $scope.isActivePage = function (page) {return $scope.selPage == page;};//Previous page$scope.Previous = function () {$scope.selPage($scope.selPage - 1);}//Next page$scope.Next = function () {$scope.selPage($scope.selPage + 1);};});}) </script> </body> </html>O editor apresentará muito a você sobre a combinação de Angular.js e Bootstrap para implementar o código de paginação da tabela, e espero que seja útil para você!