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

angular.js分頁(yè)代碼的實(shí)例

 更新時(shí)間：2016年07月27日 10:11:26   投稿：daisy  
本文用實(shí)例詳細(xì)給大家展示了angular.js分頁(yè)代碼，代碼很詳細(xì)，感興趣的小伙伴們可以參考一下

對(duì)于大多數(shù)web應(yīng)用來(lái)說(shuō)顯示項(xiàng)目列表是一種很常見(jiàn)的任務(wù)。通常情況下，我們的數(shù)據(jù)會(huì)比較多，無(wú)法很好地顯示在單個(gè)頁(yè)面中。在這種情況下，我們需要把數(shù)據(jù)以頁(yè)的方式來(lái)展示，同時(shí)帶有轉(zhuǎn)到上一頁(yè)和下一頁(yè)的功能?，F(xiàn)在在學(xué)習(xí)angular，使用angularjs 分頁(yè)，基于 directive 實(shí)現(xiàn)，樣式使用的 bootstrap，直接在 html代碼中加入 標(biāo)簽即可調(diào)用。

先來(lái)看下效果圖

實(shí)例代碼

app.directive('pagePagination', function(){
  return {
    restrict : 'E',
    template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 條記錄 / 共 <b>{{ pageCount }}</b> 頁(yè)</span></li></ul></div>',
    replace : true,
    scope : {
      "pageId"      : "=",
      "pageRecord"    : "=",
      "pageSize"     : "=",
      "pageUrlTemplate"  : "="
    },
    controller : ['$scope', function($scope){
       
      $scope.getLink = function(pageId){
        return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
      };
 
      $scope.getPageList = function(){
        var page = [];
        var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
        page.push({
          name  : '首頁(yè)',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        page.push({
          name  : '上一頁(yè)',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
          if( pageId >= 1 && pageId <= $scope.pageCount ){
            page.push({
              name  : pageId,
              link  : $scope.getLink(pageId),
              style  : pageId == $scope.pageId ? "active" : ""
            });
          }
        }
        page.push({
          name  : '下一頁(yè)',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        page.push({
          name  : '尾頁(yè)',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        return page;
      };
 
      $scope.pageInit = function(){
        if( !$scope.pageId || !$scope.pageRecord ){
          setTimeout(function(){
            $scope.$apply(function(){
              $scope.pageInit();
            });
          }, 10);
        }else{
          if( !!$scope.pageSize ){
            $scope._pageSize = parseInt($scope.pageSize);
          }else{
            $scope._pageSize = 10;
          }
          $scope.pageId    = parseInt($scope.pageId);
          $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
          if( $scope.pageId < 1 ){
            $scope.pageId = 1;
          }else if( $scope.pageId > $scope.pageCount ){
            $scope.pageId = $scope.pageCount;
          }
          $scope.pageLoad   = true;
          $scope.pageList   = $scope.getPageList();
        }
      };
       
      $scope.pageLoad = false;
      $scope.pageInit();
    }]
  }
});

調(diào)用代碼：

<page-pagination
  page-id="pageId"
  page-record="recordCount"
  page-url-template="urlTemplate">
</page-pagination>

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

相關(guān)文章

最新評(píng)論