angular分页指令操作

  <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px"> <tbody> <tr> <td></td><td>{{l.time}}</td></tr></tbody></table><!-- paging datalist属性值(dataList)为要分页的原始数据-->

 var app = angular.module("doSBill",[]); app.controller("map_ctrl",function($scope,$http,$location,$timeout){ // 原始数据 $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：监听或接收数据；此处用于监听分页指令，修改的列表视图数据 $scope.$on("orderList", function(e, orderList){ $scope.orderList = orderList; }); }); 

 <div> <p> <span> 总记录数：<span class="rjAllNums"></span> 本页记录数：<span class="rjNowNums"></span></span><button class="rjFirtPage">首页</button><button class="rjPrePage">上一页</button><span> <span class="rjNowPage"></span>/ <span class="rjAllPage"></span></span><button class="rjNextPage">下一页</button><button class="rjLastPage">尾页</button> 到第  页 <button class="rjJumpBtn">确定</button></p></div>

 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; //每页记录数 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);//初始化获取第一页数据 scope.jumpPage=function(page,dataList){ if(!parseInt(page)){ return null; } getPage(page,dataList); } function getPage(pageNow,dataList){//获取指定的页面 scope.page.nums=dataList.length; //设置总记录数 scope.page.now=pageNow;//设置当前是第几页 pagination();//设置当前有多少页面 生成一个页面数组 scope.page.orderList=getOnePage(dataList);//获取一页的数据 scope<a style="color:transparent">来源gao*daima.com搞@代#码网</a>.$emit("orderList", scope.page.orderList);//$emit：子传父，传递event与data；此处用于给父controller传递数据orderList } function getOnePage(arr){//获取一页的数据 if(arr==null){ return null; } var newarr=new Array(); if(scope.page.nowscope.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(){//设置当前有多少页面 生成一个页面数组 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; } } } } } });