angular分页指令

2017-01-09 07:52:53来源:cnblogs.com作者:灰锅人点击

目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令。直接贴代码,详情如下:

index.html

 1  <body id="sBill" ng-controller="map_ctrl"> 2     <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">             3       <tbody>   4           <tr ng-repeat="l in orderList">   5               <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td>   6               <td>{{l.time}}</td>                   7           </tr>   8       </tbody>   9     </table>  10     <!-- paging datalist属性值(dataList)为要分页的原始数据--> 11     <rj-date datalist="dataList"></rj-date> 12 13  </body>

index.js

 1 var app = angular.module("doSBill",[]); 2  3 app.controller("map_ctrl",function($scope,$http,$location,$timeout){   4     // 原始数据 5     $scope.dataList=[ 6     {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10}, 7     {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20}, 8     {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30}, 9     {'time':31}10     ];11     //$on:监听或接收数据;此处用于监听分页指令,修改的列表视图数据12     $scope.$on("orderList", function(e, orderList){13       $scope.orderList = orderList;14     });15 16 }); 

 

 

指令模板  page.html

 1 <div> 2   <p> 3     <span> 4       总记录数:<span class="rjAllNums" ng-bind="page.nums"></span> 5       本页记录数:<span class="rjNowNums" ng-bind="page.nowNums"></span> 6     </span> 7     <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首页</button> 8     <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一页</button> 9     <span>10       <span class="rjNowPage" ng-bind="page.now"></span>/11       <span class="rjAllPage" ng-bind="page.pageCount"></span>12     </span>13     <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一页</button>14     <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾页</button>15     到第 16     <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>17 18     <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">确定</button>19   </p>20 21 </div>

 

 指令定义page.js

 1 app.directive('rjDate',function(){ 2         return { 3             restrict: 'EA',    4             replace: false, 5             scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定,详情看指令scop作用域             6             templateUrl: 'pageDirective/template/page.html',    7             link: function(scope,elem,attr){ 8  9                 var page={};//分页对象10                 scope.page=page;11                 scope.page.onePageNums=10; //每页记录数12                 scope.page.nums=0;13                 scope.page.now=1;14                 scope.page.nowNums=0;15                 scope.page.pageCount=1;16                 scope.getPage=getPage; //设置获取页面的ng-click17                 scope.page.orderList=[];18 19                 getPage(1,scope.dataList);//初始化获取第一页数据20 21                 scope.jumpPage=function(page,dataList){        22                     if(!parseInt(page)){23                       return null;24                     }25                     getPage(page,dataList);26                   }27                 function getPage(pageNow,dataList){//获取指定的页面         28                       scope.page.nums=dataList.length; //设置总记录数29                       scope.page.now=pageNow;//设置当前是第几页30                      pagination();//设置当前有多少页面 生成一个页面数组31                      scope.page.orderList=getOnePage(dataList);//获取一页的数据32                      scope.$emit("orderList", scope.page.orderList);//$emit:子传父,传递event与data;此处用于给父controller传递数据orderList   33                 }34                 35                 function getOnePage(arr){//获取一页的数据36                     if(arr==null){                      37                       return null;38                     }  39                     var newarr=new Array();40                     if(scope.page.now<1){41                         scope.page.now=1;42                     }43                     if(scope.page.now>scope.page.pageCount){44                         scope.page.now=scope.page.pageCount;45                     }46                     scope.page.nowNums=scope.page.onePageNums;47                     var pagenow=scope.page.now;  48 49                     var begin=(pagenow-1)*scope.page.onePageNums;                                  50                     var end=begin+scope.page.onePageNums;51                     var lens=scope.page.nums;52 53                     if(end>lens){54                         end=lens;55                         scope.page.nowNums=lens-begin;56                     }57                                58                     for(begin;begin<end;begin++){59                         newarr.push(arr[begin]);60                     }61                         return newarr;62                 }63                 function pagination(){//设置当前有多少页面 生成一个页面数组64                     if(scope.page.nums<=scope.page.onePageNums){65                         scope.page.pageCount=1;66                     }else{67                         if(scope.page.nums%scope.page.onePageNums==0){68                             scope.page.pageCount=scope.page.nums/scope.page.onePageNums;69                         }else{70                             scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;71                         }72                     }73                 }74                 75             }76         }77     }); 

 效果如图所示:

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台