欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息

 更新時(shí)間：2016年07月01日 15:32:18   作者：lp_frank  
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息效果的相關(guān)資料，感興趣的小伙伴們可以參考一下

接著第一篇《》AngularJS內(nèi)建服務(wù)$location及其功能詳解》，進(jìn)行學(xué)習(xí)

Section 2：實(shí)現(xiàn)分頁(yè)顯示效果

那么再隱身一下，通過(guò)location的setter方法設(shè)置當(dāng)前的url信息。在這里為了能夠讓演示看到更好的效果，在這個(gè)比較完整的實(shí)例中，我引入了angularJS的多路由技術(shù)、嵌套的控制器之間傳遞數(shù)據(jù)、scope的繼承、 http通信、內(nèi)鏈接傳遞變量等。

首先建立一個(gè)首頁(yè)模板

<!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}} 頁(yè)</span>
</div>
</body>
</html>

通過(guò)一些簡(jiǎn)單的CSS樣式將頁(yè)面的布局修飾了一下。

然后在首頁(yè)的元素里設(shè)置了一些ngApp和controller。

在屬性為ngView的div元素中，將嵌入其他HTML的模板。

緊接著下方，我擺放了三個(gè)按鈕，其中前兩個(gè)是上一頁(yè)和下一頁(yè)的翻頁(yè)按鈕；一個(gè)輸入框可供用戶(hù)輸入他想跳轉(zhuǎn)到的頁(yè)碼，旁邊的按鈕作為頁(yè)碼的提交按鈕，點(diǎn)擊后頁(yè)面立即翻頁(yè)。

這三個(gè)按鈕里面都有一個(gè)ngClick屬性，表示當(dāng)用戶(hù)點(diǎn)擊按鈕后，便會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)。

在講解angularJS的js代碼前，先截圖看看文件的目錄結(jié)構(gòu)。

這里寫(xiě)圖片描述

上面的index.html是之前兩個(gè)例子的，可以不去理會(huì)。

為了簡(jiǎn)單期間，我把script腳本都放在了turnPage.html文件的下方了。下面就是全這個(gè)文件的完整代碼：

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}} 頁(yè)</span>
</div>
<script>
  //實(shí)例化用戶(hù)自己的ngApp對(duì)象。這里因?yàn)橛玫搅寺酚蓹C(jī)制，所以在依賴(lài)注入中寫(xiě)入ngRoute這個(gè)模塊
  var turnPageApp = angular.module('turnPageApp', ['ngRoute']);
  /*
   設(shè)置對(duì)于不同的url，啟用不同的模板和控制器。
   本例由于只用到了一個(gè)模板，所以遇到的路由的情況就只有一種，即 “/id”
   */
  turnPageApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/:id', { //這里的id其實(shí)表示的是翻頁(yè)中的頁(yè)碼
          templateUrl: 'view/student.html',
          controller: 'StudentController'
        })
        .otherwise({redirectTo: '/1'});//如果沒(méi)法匹配到url時(shí)，直接跳轉(zhuǎn)會(huì)第一頁(yè)
  }]);
  //注冊(cè)父控制器indexController，這里由于需要將模板里的子控制器的值傳遞給父控制器，所以需要這個(gè)根域$rootScope來(lái)幫忙，在返回函數(shù)里需要傳入這個(gè)根域?qū)ο蟆?
  //而且，本例是基于對(duì)url的操作來(lái)實(shí)現(xiàn)翻頁(yè)，所以這個(gè)內(nèi)建的$location服務(wù)是一定要傳入的
  turnPageApp.controller('indexController', function ($rootScope, $scope, $location) {
    //給父scope定義函數(shù)
    $scope.previous = function () {
      //從瀏覽器的地址欄獲取路徑，即turnPage.html#/1中井號(hào)后面的內(nèi)容：“ /1 ”
      //然后通過(guò)JavaScript的silce函數(shù)取出斜杠后面的字符，并轉(zhuǎn)換成數(shù)字。
      //加 1 還是減 1 要看是在定義的是哪個(gè)按鈕的功能函數(shù)了
      var pageNum = parseInt($location.path().slice(1)) - 1;
      //頁(yè)碼是有限的，需要做一些判斷
      if (pageNum < 1) {
        alert('This is the first page');
      } else {
        //如果現(xiàn)在沒(méi)有處在第一頁(yè)，則path屬性減去1，即向前翻一頁(yè)。這個(gè)翻頁(yè)的效果就是通過(guò)設(shè)置url中的path來(lái)實(shí)現(xiàn)
        $location.path(pageNum);
      }
    };
    //和上面的previous（）函數(shù)類(lèi)似
    $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);
      }
    };
    //這是一個(gè)直接跳轉(zhuǎn)到那個(gè)頁(yè)碼的函數(shù)，在判斷的地方稍微繁瑣些
    $scope.goToPage = function () {
      //從input輸入框綁定的currentPage變量中獲取用戶(hù)輸入的值
      var pageNum = $scope.currentPage;
      //為了程序的嚴(yán)密和可用性，需要先判斷輸入是否為空
      if (pageNum == null || pageNum == undefined || pageNum == "") {
        alert("try to input a page number");
        //如果不是空，再判斷用戶(hù)輸入的頁(yè)碼是否超出了頁(yè)碼的范圍
        //這里出現(xiàn)了$rootScope這個(gè)根域及其屬性allPage，該屬性的值是頁(yè)碼的總數(shù)
      } else if (!(pageNum >= 1 && pageNum <= $rootScope.allPage)) {
        alert("The page number is beyond the scope of the number of the students")
      } else {
        //如果都沒(méi)問(wèn)題了，則修改URL，此時(shí)angularJS會(huì)捕捉地址欄的變化，然后跳轉(zhuǎn)，細(xì)節(jié)將在下面講解。
        $location.path(pageNum);
      }
    };
  });
  //這里實(shí)在注冊(cè)嵌入到首頁(yè)的模板頁(yè)的控制器。
  //由于子域和父域的通信需要借助根域，所以在依賴(lài)中傳入$rootScope對(duì)象
  //$scope是模板自己的作用域，它繼承了父控制器indexController生成的作用域
  //在模板中需要與服務(wù)端的文件進(jìn)行交互，所以需要引入內(nèi)建的$http服務(wù)。為了控制實(shí)例的復(fù)雜度，我直接寫(xiě)了一個(gè)json文件，做了一些假數(shù)據(jù)。
  //這里$routeParams是一個(gè)對(duì)象，這個(gè)對(duì)象里有一個(gè)屬性，就是我們之前在config（）函數(shù)里看到的那個(gè)id（/:id），這個(gè)id是個(gè)變量，地址欄里的path是幾，這個(gè)id就是幾。id的值需要通過(guò)$routeParams這個(gè)對(duì)象來(lái)取得。
  turnPageApp.controller('StudentController', ['$rootScope', '$scope', '$http', '$routeParams', function ($rootScope, $scope, $http, $routeParams) {
    //$http的get方法與遠(yuǎn)程的一個(gè)文件發(fā)出請(qǐng)求，如果成功，則執(zhí)行一個(gè)回調(diào)函數(shù)，函數(shù)的參數(shù)就是從遠(yuǎn)端文件里拿到的數(shù)據(jù)，這個(gè)數(shù)據(jù)可以是個(gè)數(shù)組，也可以是個(gè)對(duì)象。
    //那么我們這次拿到的是一個(gè)json數(shù)組，數(shù)組的元素是一個(gè)個(gè)的對(duì)象。
    $http.get('data/students.json').success(function (data) {
      //把數(shù)組里的一個(gè)元素取出來(lái)，賦給模板子作用域?qū)ο蟮膶傩陨?。由于json數(shù)組的id是從1開(kāi)始寫(xiě)的，而返回的數(shù)據(jù)是個(gè)數(shù)組，下標(biāo)從0開(kāi)始，所以要減去1
      $scope.student = data[$routeParams.id - 1];
      //這里順便把這個(gè)數(shù)組的元素個(gè)數(shù)取出來(lái)，每個(gè)元素就代表以頁(yè)。那么元素總個(gè)數(shù)就代表共有多少頁(yè)。
      //注意要傳遞給最高級(jí)別的根域?qū)ο?，因?yàn)樽佑蚰芨矊?xiě)父域的同名屬性；子域如果沒(méi)有直接賦值，那么子域的同名屬性將繼承父域同名屬性的值；
      /*我們?cè)诨氐奖疚募a上面的“共 {{allPage}} 頁(yè)”處，這個(gè)就是根域$rootScope的屬性。而且在父控制器中并沒(méi)有特別的賦值。而這個(gè)span元素恰好就在父控制器的作用域內(nèi)，那么這個(gè)元素里的allPage屬性就會(huì)繼承父作用域的同名屬性allPage的值，也就間接的顯示出了總頁(yè)數(shù)。
      */
      $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"
  ]
 }
]

這里寫(xiě)圖片描述

這是剛開(kāi)始的樣子，地址欄中默認(rèn)的path是/1，所以直接顯示了第一個(gè)學(xué)生的信息。頁(yè)碼總數(shù)也能獲得。

這里寫(xiě)圖片描述

點(diǎn)擊了Previous按鈕后的效果。不能再往前翻頁(yè)了

這里寫(xiě)圖片描述

處于第4頁(yè)時(shí)，點(diǎn)擊Next按鈕時(shí)的效果。不能再往后翻頁(yè)了。

這里寫(xiě)圖片描述

在頁(yè)碼范圍內(nèi)翻頁(yè)是沒(méi)有問(wèn)題的！

這里寫(xiě)圖片描述

鑒于篇幅，我就不演示輸入的頁(yè)碼超出范圍的情況了。上面的截圖是輸入正確范圍的頁(yè)碼，點(diǎn)擊Go按鈕的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論