Permettez-moi d'abord d'introduire brièvement les concepts de base de Angular.js et bootstrap.
AngularJS est un cadre JavaScript. Il peut être ajouté aux pages HTML via la balise <cript>.
AngularJS étend le HTML via des directives et lie les données au HTML à travers des expressions.
Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
J'ai récemment appris Angular.js et j'ai pratiqué beaucoup de démos pendant le processus d'apprentissage. Ici, je publierai d'abord le formulaire + pagination.
Jetons un coup d'œil au résultat final:
Je dois dire que le style de code angulaire.js est très populaire et que des dizaines de lignes de code implémentent clairement et de manière concise les fonctions ci-dessus.
Tout d'abord, la source de données du tableau provient de server.js, cliquez pour télécharger. Obtenez le numéro, puis affichez-le à la page.
1. Le tableau est affiché via Ng-Repeat, et le code est le suivant:
<Bile> <Tr> <Th> Index </ Th> <th ng-repeat = "(x, y) dans les éléments [0]"> {{x}} </ th> </tr> <tr ng-repeat = "x dans les éléments"> <td> {{$ index + 1}} </td> <td ng-bind = "x.name"> </ Td> ng-bind = "x.city"> </td> <td ng-bind = "x.country"> </td> </tr> </s table>$ index est le paramètre de répétition par défaut. L'en-tête de colonne du tableau est la valeur clé en boucle via la première ligne de la source de données (JSON). Bien sûr, si Bootstrap doit spécifier que la classe de la table est bordée de table.
2. La pagination utilise également Ng-Repeat. Je dois dire que Ng-Repeat est une instruction courante.
Le code de pagination est le suivant:
<Nav> <ul> <li> <a ng-click = "précédemment ()"> <span> page précédente </span> </a> </li> <li ng-repeat = "Page dans PageList" ng-CLASS = "{active: isactivePage (page)}"> <a ng-Click = "SelectPage (page)"> {{{page}} ng-click = "next ()"> <span> page suivante </span> </a> </li> </ul> </ nav>Ici, nous utilisons l'instruction de l'événement NG-CLICK. Commande de classe NG également utilisée
ng-class = "{active: isActivePage (page)}"Le code ci-dessus est le style sélectionné pour la pagination.
Ce tableau ajoute de la pagination à la page est un faux paginage, qui prend des données du backend une fois, et affiche les données filtrées de JSON par la pagination différente.
Code spécifique + commentaires:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; chasset = utf-8" /> <title> </ title> CSS file--><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><style>#divMain {width: 500px;margin: 0 auto;margin-top: 100px;}nav {position: relative;width:100%;height: 50px;}. Pagination {à droite: 0px; position: absolu; top: -30px;} nav li {curseur: pointeur;} </ style> <div id = "divmain" ng-app = "myapp" ng-controller = "myctrl"> <table éléments [0] "> {{x}} </ th> </tr> <tr ng-repeat =" x dans les éléments "> <td> {{$ index + 1}} </td> <td ng-bind =" x.name "> </ td> <td ng-bind =" x.city "> </td> <td> ng-bind = "x.country"> </td> </tr> </ table> <Anav> <ul> <li> <a ng-Click = "Prive ()"> <span> page précédente </span> </a> </li> <li ng-repeat = "Page dans PageList" Ng-Class = "{Active: IsActivePage (page)}"> <A ng-click = "selectPage (page)"> {{page}} </a> </li> <li> <a ng-click = "next ()"> <span> page suivante </span> </a> </li> </ul> </AV> </ div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </cript> </ script> var app = angular.module ("myapp", []); app.Controller ("myctrl", fonction ($ Scope, $ http) {$ http.get ("service.js"). puis (fonction (réponse) {// source de données $ scope.data = réponse.data.records; // nombre total de pages $ scope.pagesize = 5; $ scope.pages = math.ceil ($ scope.data.length $ scope.pages> 5? 5: $ scope.pages; $ scope.pagelist = []; $ scope.selpage = 1; // définir la source de données de la table (pagin $ scope.pageSize)); // filtrez les données affichées actuelles dans le tableau par le nombre actuel de pages} $ scope.items = $ scope.data.slice (0, $ scope.pagesize); // le tableau vers lequel la pagination doit être répétée pour (var i = 0; i <$ Scope.Newpages; i ++) {$ scope.pag. 1);} // imprimer l'index de page actuellement sélectionné $ scope.selectpage = fonction (page) {// pas moins de 1 que le maximum if (page <1 || page> $ scope.pages) RETOUR; // Le nombre maximum de pages est affiché 5if (page> 2) {// Parce que seules 5 pages sont affichées, la conversion de page commence plus à 2 pages ; Pages? $ Scope.Pages: (Page + 2)); page);}; // définir le style de page actuellement sélectionné $ scope.isactivePage = function (page) {return $ scope.selpage == page;}; // page précédente $ scope.previous = function () {$ scope.selpage ($ scope.selpage - 1);} // $ scope.next = function () {$ scope.selpage ($ scope.next = function () {$ scope.selpage ($ scope.next = function () {$ SCOPE.Speg 1);};});}) </cript> </ body> </html>L'éditeur vous présentera tellement sur la combinaison d'Angular.js et de bootstrap pour implémenter le code de pagination de table, et j'espère que cela vous sera utile!