首頁 > 開發者 > JavaScript
AngularJS實現分頁顯示資料庫資訊，angularjs分頁顯示
接著第一篇《》AngularJS內建服務$location及其功能詳解》，進行學習
Section 2：實現分頁顯示效果
那麼再隱藏一下，通過location的setter方法設定當前的url資訊。在這裡為了能夠讓示範看到更好的效果，在這個比較完整的執行個體中，我引入了angularJS的多路由技術、嵌套的控制器之間傳遞資料、scope的繼承、 http通訊、內連結傳遞變數等。
首先建立一個首頁模板
<!DOCTYPE html><html ng-app="turnPageApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="lib/angular.js"></script> <script src="lib/angular-route.min.js"></script> <style type="text/css"> .turnPageButtonArea { background-color: #f07a13; width: 500px; height: 30px; line-height: 30px; text-align: center; margin: 10px auto; padding: 20px; } button { margin-right: 20px; width: 100px; height: 30px; font-size: 15px; } .pageNum { width: 50px; height: 23px; text-align: center; } body { font-family: 微軟雅黑; } 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 class="turnPageButtonArea"> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type="number" ng-model="currentPage" class="pageNum"> <button ng-click="goToPage()">Go</button> <span class="totalPages">共 {{allPage}} 頁</span></div></body></html>
通過一些簡單的CSS樣式將頁面的布局修飾了一下。
然後在首頁的元素裡設定了一些ngApp和controller。
在屬性為ngView的div元素中，將嵌入其他HTML的模板。
緊接著下方，我擺放了三個按鈕，其中前兩個是上一頁和下一頁的翻頁按鈕；一個輸入框可供使用者輸入他想跳轉到的頁碼，旁邊的按鈕作為頁碼的提交按鈕，點擊後頁面立即翻頁。
這三個按鈕裡面都有一個ngClick屬性，表示當使用者點擊按鈕後，便會執行對應的函數。
在講解angularJS的js代碼前，先看看檔案的目錄結構。
上面的index.html是之前兩個例子的，可以不去理會。
為了簡單期間，我把script指令碼都放在了turnPage.html檔案的下方了。下面就是全這個檔案的完整代碼：
turnPage.html
<!DOCTYPE html><html ng-app="turnPageApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="lib/angular.js"></script> <script src="lib/angular-route.min.js"></script> <style type="text/css"> .turnPageButtonArea { background-color: #f07a13; width: 500px; height: 30px; line-height: 30px; text-align: center; margin: 10px auto; padding: 20px; } button { margin-right: 20px; width: 100px; height: 30px; font-size: 15px; } .pageNum { width: 50px; height: 23px; text-align: center; } body { font-family: 微軟雅黑; } 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 class="turnPageButtonArea"> <button ng-click="previous()">Previous</button> <button ng-click="next()">Next</button> <input type="number" ng-model="currentPage" class="pageNum"> <button ng-click="goToPage()">Go</button> <span class="totalPages">共 {{allPage}} 頁</span></div><script> //執行個體化使用者自己的ngApp對象。這裡因為用到了路由機制，所以在依賴注入中寫入ngRoute這個模組 var turnPageApp = angular.module('turnPageApp', ['ngRoute']); /* 設定對於不同的url，啟用不同的模板和控制器。 本例由於只用到了一個模板，所以遇到的路由的情況就只有一種，即 “/id” */ turnPageApp.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/:id', { //這裡的id其實表示的是翻頁中的頁碼 templateUrl: 'view/student.html', controller: 'StudentController' }) .otherwise({redirectTo: '/1'});//如果沒法匹配到url時，直接跳轉會第一頁 }]); //註冊父控制器indexController，這裡由於需要將模板裡的子控制器的值傳遞給父控制器，所以需要這個根域$rootScope來幫忙，在返回函數裡需要傳入這個根域對象。 //而且，本例是基於對url的操作來實現翻頁，所以這個內建的$location服務是一定要傳入的 turnPageApp.controller('indexController', function ($rootScope, $scope, $location) { //給父scope定義函數 $scope.previous = function () { //從瀏覽器的地址欄擷取路徑，即turnPage.html#/1中井號後面的內容：“ /1 ” //然後通過JavaScript的silce函數取出斜杠後面的字元，並轉換成數字。 //加 1 還是減 1 要看是在定義的是哪個按鈕的功能函數了 var pageNum = parseInt($location.path().slice(1)) - 1; //頁碼是有限的，需要做一些判斷 if (pageNum < 1) { alert('This is the first page'); } else { //如果現在沒有處在第一頁，則path屬性減去1，即向前翻一頁。這個翻頁的效果就是通過設定url中的path來實現 $location.path(pageNum); } }; //和上面的previous（）函數類似 $scope.next = function () { var pageNum = parseInt($location.path().slice(1)) + 1; if (pageNum > $rootScope.allPage) { alert('This is the last page'); } else { $location.path(pageNum); } }; //這是一個直接跳轉到那個頁碼的函數，在判斷的地方稍微繁瑣些 $scope.goToPage = function () { //從input輸入框綁定的currentPage變數中擷取使用者輸入的值 var pageNum = $scope.currentPage; //為了程式的嚴密和可用性，需要先判斷輸入是否為空白 if (pageNum == null || pageNum == undefined || pageNum == "") { alert("try to input a page number"); //如果不是空，再判斷使用者輸入的頁碼是否超出了頁碼的範圍 //這裡出現了$rootScope這個根域及其屬性allPage，該屬性的值是頁碼的總數 } else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) { alert("The page number is beyond the scope of the number of the students") } else { //如果都沒問題了，則修改URL，此時angularJS會捕捉地址欄的變化，然後跳轉，細節將在下面講解。 $location.path(pageNum); } }; }); //這裡實在註冊嵌入到首頁的模板頁的控制器。 //由於子域和父域的通訊需要藉助根域，所以在依賴中傳入$rootScope對象 //$scope是模板自己的範圍，它繼承了父控制器indexController產生的範圍 //在模板中需要與服務端的檔案進行互動，所以需要引入內建的$http服務。為了控制執行個體的複雜度，我直接寫了一個json檔案，做了一些假資料。 //這裡$routeParams是一個對象，這個對象裡有一個屬性，就是我們之前在config（）函數裡看到的那個id（/:id），這個id是個變數，地址欄裡的path是幾，這個id就是幾。id的值需要通過$routeParams這個對象來取得。 turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) { //$http的get方法與遠端一個檔案發出請求，如果成功，則執行一個回呼函數，函數的參數就是從遠端檔案裡拿到的資料，這個資料可以是個數組，也可以是個對象。 //那麼我們這次拿到的是一個json數組，數組的元素是一個個的對象。 $http.get('data/students.json').success(function (data) { //把數組裡的一個元素取出來，賦給模板子範圍對象的屬性上。由於json數組的id是從1開始寫的，而返回的資料是個數組，下標從0開始，所以要減去1 $scope.student = data[$routeParams.id - 1]; //這裡順便把這個數組的元素個數取出來，每個元素就代表以頁。那麼元素總個數就代表共有多少頁。 //注意要傳遞給最進階別的根域對象，因為子域能覆寫父域的同名屬性；子域如果沒有直接賦值，那麼子域的同名屬性將繼承父域同名屬性的值； /*我們在回到本檔案代碼上面的“共 {{allPage}} 頁”處，這個就是根域$rootScope的屬性。而且在父控制器中並沒有特別的賦值。而這個span元素恰好就在父控制器的範圍內，那麼這個元素裡的allPage屬性就會繼承父範圍的同名屬性allPage的值，也就間接的顯示出了總頁數。 */ $rootScope.allPage = data.length; }); }]);</script></body></html>
view/student.html
<table cellspacing="0"> <tr> <td class="title">ID</td> <td>{{student.id}}</td> </tr> <tr> <td class="title">Name</td> <td>{{student.name}}</td> </tr> <tr> <td class="title">Sex</td> <td>{{student.sex}}</td> </tr> <tr> <td class="title">Age</td> <td>{{student.age}}</td> </tr> <tr> <td class="title">Courses</td> <td> <ul> <li ng-repeat="course in student.courses">{{course}}</li> </ul> </td> </tr></table><style type="text/css"> table { border: solid 1px #000000; margin: 0px auto; } td { padding: 10px 10px 10px 20px; margin: 0px; border: solid 1px #000000; } tr { margin: 0px; padding: 0px; } .title { background-color: #207ef0; text-align: center; color: #ffffff; } ul { list-style: none; margin: 0px; padding: 0px; } li { float: left; margin: 10px; }</style>
data/students.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", "courses": [ "iology and medical science", "pplied biology", "medicine", "cell biology" ] }, { "id": 4, "name": "Lucy Mu", "sex": "female", "age": "22", "courses": [ "Introduction to ART ", "sketch", "Composition", "sculpture" ] }]
這是剛開始的樣子，地址欄中預設的path是/1，所以直接顯示了第一個學生的資訊。頁碼總數也能獲得。
點擊了Previous按鈕後的效果。不能再往前翻頁了
處於第4頁時，點擊Next按鈕時的效果。不能再往後翻頁了。
在頁碼範圍內翻頁是沒有問題的！
鑒於篇幅，我就不示範輸入的頁碼超出範圍的情況了。上面的是輸入正確範圍的頁碼，點擊Go按鈕的效果。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
