Tout d'abord, je vais vous donner une brève introduction aux concepts de base d'angular.js et de bootstrap. AngularJS est un framework JavaScript. Il peut être ajouté aux pages HTML via la balise <br> </p> <p>AngularJS étend le HTML via des directives et lie les données au HTML via des expressions. <br> </p> <p>Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web. <br> </p> <p>J'ai récemment appris Angular.js et j'ai également pratiqué de nombreuses démos pendant le processus d'apprentissage. Ici, je publierai le tableau + la pagination. <br> </p> <p>Regardez d'abord l'image ci-dessus pour voir le résultat final : </p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201604/2016041210511742.gif"></p> <p>Je dois dire que le style de code Angular.js est très populaire. Des dizaines de lignes de code réalisent les fonctions ci-dessus de manière claire et concise. <br> </p> <p>Tout d'abord, la source de données du tableau provient de Server.js. Cliquez pour télécharger. Après avoir obtenu le numéro via get, il est affiché en pages. <br> </p> <p><strong>1. Le tableau est affiché via ng-repeat, le code est le suivant : </strong><br> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <table class="table table-bordered"> <tr> <th>index</th> <th ng-repeat="(x,y) in items[0]">{{ x }}</th> </tr> <tr ng-repeat="x in items"> <td>{{ $index + 1 }}</td> <td ng-bind="x.Name"></td> <td ng-bind="x.City"></td> <td ng-bind="x.Country"></td> </tr> </table> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>$index est le paramètre par défaut de répétition. L'en-tête de colonne du tableau est la valeur clé parcourue en boucle dans 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 d'une table. <br /> </p> <p><strong>2. Paging utilise également ng-repeat. Il faut dire que ng-repeat est une commande couramment utilisée. </strong></p> <p>Le code de radiomessagerie est le suivant : <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <nav> <ul class="pagination"> <li> <a ng-click="Previous()"> <span>上一页</span> </a> </li> <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" > <a ng-click="selectPage(page)" >{{ page }}</a> </li> <li> <a ng-click="Next()"> <span>下一页</span> </a> </li> </ul> </nav> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>La directive d'événement ng-click est utilisée ici. J'ai également utilisé la directive ng-class <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> ng-class="{active: isActivePage(page)}" </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>Le code ci-dessus est le style sélectionné pour la pagination. <br /> </p> <p>La pagination ajoutée à ce tableau est une fausse pagination. Les données sont récupérées une fois depuis le backend et les données filtrées json sont affichées via une pagination différente. <br /> </p> <p>Code détaillé + commentaires : <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格</title> </head> <body> <!-- 新 Bootstrap 核心 CSS 文件 --> <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 { right: 0px; position: absolute; top: -30px; } nav li { cursor: pointer; } </style> <div id="divMain" ng-app="myApp" ng-controller="myCtrl"> <table class="table table-bordered"> <tr> <th>index</th> <th ng-repeat="(x,y) in items[0]">{{ x }}</th> </tr> <tr ng-repeat="x in items"> <td>{{ $index + 1 }}</td> <td ng-bind="x.Name"></td> <td ng-bind="x.City"></td> <td ng-bind="x.Country"></td> </tr> </table> <nav> <ul class="pagination"> <li> <a ng-click="Previous()"> <span>上一页</span> </a> </li> <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" > <a ng-click="selectPage(page)" >{{ page }}</a> </li> <li> <a ng-click="Next()"> <span>下一页</span> </a> </li> </ul> </nav> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope, $http) { $http.get("Service.js").then(function (response) { //数据源 $scope.data = response.data.records; //分页总数 $scope.pageSize = 5; $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数 $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages; $scope.pageList = []; $scope.selPage = 1; //设置表格数据源(分页) $scope.setData = function () { $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据 } $scope.items = $scope.data.slice(0, $scope.pageSize); //分页要repeat的数组 for (var i = 0; i < $scope.newPages; i++) { $scope.pageList.push(i + 1); } //打印当前选中页索引 $scope.selectPage = function (page) { //不能小于1大于最大 if (page < 1 || page > $scope.pages) return; //最多显示分页数5 if (page > 2) { //因为只显示5个页数，大于2页开始分页转换 var newpageList = []; for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) { newpageList.push(i + 1); } $scope.pageList = newpageList; } $scope.selPage = page; $scope.setData(); $scope.isActivePage(page); console.log("选择的页：" + page); }; //设置当前选中页样式 $scope.isActivePage = function (page) { return $scope.selPage == page; }; //上一页 $scope.Previous = function () { $scope.selectPage($scope.selPage - 1); } //下一页 $scope.Next = function () { $scope.selectPage($scope.selPage + 1); }; }); })
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
