angular分頁指令操作

更新時間：2017年01月09日 08:35:08 作者：灰鍋

這篇文章主要為大家詳細介紹了angular分頁指令操作的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

目前的多個項目中都用到分頁這個功能，為了提高可復用性，我特地分離出來寫了個分頁的指令。直接貼代碼，詳情如下：

index.html

<body id="sBill" ng-controller="map_ctrl">
  <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">      
   <tbody> 
     <tr ng-repeat="l in orderList"> 
       <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td> 
       <td>{{l.time}}</td>         
     </tr> 
   </tbody> 
  </table> 
  <!-- paging datalist屬性值(dataList)為要分頁的原始數(shù)據(jù)--> 
  <rj-date datalist="dataList"></rj-date> 

 </body>

index.js

var app = angular.module("doSBill",[]);

app.controller("map_ctrl",function($scope,$http,$location,$timeout){ 
  // 原始數(shù)據(jù)
  $scope.dataList=[
  {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10},
  {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20},
  {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30},
  {'time':31}
  ];
  //$on：監(jiān)聽或接收數(shù)據(jù)；此處用于監(jiān)聽分頁指令，修改的列表視圖數(shù)據(jù)
  $scope.$on("orderList", function(e, orderList){
   $scope.orderList = orderList;
  });

});

指令模板 page.html

<div>
 <p>
  <span>
   總記錄數(shù)：<span class="rjAllNums" ng-bind="page.nums"></span>
   本頁記錄數(shù)：<span class="rjNowNums" ng-bind="page.nowNums"></span>
  </span>
  <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首頁</button>
  <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一頁</button>
  <span>
   <span class="rjNowPage" ng-bind="page.now"></span>/
   <span class="rjAllPage" ng-bind="page.pageCount"></span>
  </span>
  <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一頁</button>
  <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾頁</button>
  到第 
  <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>
   頁
  <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">確定</button>
 </p>

</div>

指令定義page.js

app.directive('rjDate',function(){
    return {
      restrict: 'EA',  
      replace: false,
      scope : {dataList:'=datalist'},//設置scope.dataList與指令屬性“datalist”值綁定，詳情看指令scop作用域      
      templateUrl: 'pageDirective/template/page.html',  
      link: function(scope,elem,attr){

        var page={};//分頁對象
        scope.page=page;
        scope.page.onePageNums=10; //每頁記錄數(shù)
        scope.page.nums=0;
        scope.page.now=1;
        scope.page.nowNums=0;
        scope.page.pageCount=1;
        scope.getPage=getPage; //設置獲取頁面的ng-click
        scope.page.orderList=[];

        getPage(1,scope.dataList);//初始化獲取第一頁數(shù)據(jù)

        scope.jumpPage=function(page,dataList){    
          if(!parseInt(page)){
           return null;
          }
          getPage(page,dataList);
         }
        function getPage(pageNow,dataList){//獲取指定的頁面     
           scope.page.nums=dataList.length; //設置總記錄數(shù)
           scope.page.now=pageNow;//設置當前是第幾頁
           pagination();//設置當前有多少頁面 生成一個頁面數(shù)組
           scope.page.orderList=getOnePage(dataList);//獲取一頁的數(shù)據(jù)
           scope.$emit("orderList", scope.page.orderList);//$emit：子傳父，傳遞event與data；此處用于給父controller傳遞數(shù)據(jù)orderList  
        }
        
        function getOnePage(arr){//獲取一頁的數(shù)據(jù)
          if(arr==null){           
           return null;
          } 
          var newarr=new Array();
          if(scope.page.now<1){
            scope.page.now=1;
          }
          if(scope.page.now>scope.page.pageCount){
            scope.page.now=scope.page.pageCount;
          }
          scope.page.nowNums=scope.page.onePageNums;
          var pagenow=scope.page.now; 

          var begin=(pagenow-1)*scope.page.onePageNums;                 
          var end=begin+scope.page.onePageNums;
          var lens=scope.page.nums;

          if(end>lens){
            end=lens;
            scope.page.nowNums=lens-begin;
          }
                
          for(begin;begin<end;begin++){
            newarr.push(arr[begin]);
          }
            return newarr;
        }
        function pagination(){//設置當前有多少頁面 生成一個頁面數(shù)組
          if(scope.page.nums<=scope.page.onePageNums){
            scope.page.pageCount=1;
          }else{
            if(scope.page.nums%scope.page.onePageNums==0){
              scope.page.pageCount=scope.page.nums/scope.page.onePageNums;
            }else{
              scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;
            }
          }
        }
        
      }
    }
  });

效果如圖所示：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Angular17之Angular自定義指令詳解
這篇文章主要介紹了Angular17之 Angular自定義指令的相關知識 ,需要的朋友可以參考下
2018-01-01
Angular處理未可知異常錯誤的方法詳解
這篇文章主要給大家介紹了關于Angular如何處理未可知異常錯誤的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
AngularJS通過$sce輸出html的方法
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現(xiàn)這種功能的通過這篇文章來看看吧。
2016-09-09
詳解AngularJS中的http攔截
這篇文章主要為大家詳細介紹了AngularJS中的http攔截，$http服務允許我們與服務端交互，有時候我們希望在發(fā)出請求之前以及收到響應之后做些事情。即http攔截,需要的朋友可以參考下
2016-02-02
詳解使用angularjs的ng-options時如何設置默認值(初始值)
本篇文章主要介紹了詳解使用angularjs的ng-options時如何設置默認值(初始值)，具有一定的參考價值，有興趣的可以了解一下
2017-07-07
AngularJS 基礎ng-class-even指令用法
本文主要介紹AngularJS ng-class-even 指令,這里整理了ng-class-even基礎知識資料,并附實例代碼和效果圖,學習AngularJS指令的朋友可以看下
2016-08-08
AngularJS基礎 ng-include 指令示例講解
本文主要介紹AngularJS ng-include 指令,這里對ng-include 指令的知識做了詳細整理介紹,有需要的朋友可以參考下
2016-08-08
AngularJS 使用 UI Router 實現(xiàn)表單向導
這篇文章主要介紹了AngularJS 使用 UI Router 實現(xiàn)表單向導的相關資料,需要的朋友可以參考下
2016-01-01
Angular PWA使用的Demo示例
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Angular.Js中過濾器filter與自定義過濾器filter實例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定義過濾器，所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05