angular分页指令操作的教程
发布时间：01/15 来源： 浏览：
关键词：
小编推荐的这篇文章介绍了angular分页指令操作的教程，有兴趣的同学可以参考一下
目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下：
index.html
|
<bodyid="sBill"ng-controller="map_ctrl">
<tableclass="table table-striped"style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">
<tbody>
<trng-repeat="l in orderList">
<td><inputtype="radio"name="id"ng-click="select(l.id)"value="{{l.id}}"/></td>
<td>{{l.time}}</td>
</tr>
</tbody>
</table>
<!-- paging datalist属性值(dataList)为要分页的原始数据-->
<rj-datedatalist="dataList"></rj-date>
</body>
|
index.js
|
varapp = 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;
});
});
|
指令模板 page.html
|
<div>
<p>
<span>
总记录数：<spanclass="rjAllNums"ng-bind="page.nums"></span>
本页记录数：<spanclass="rjNowNums"ng-bind="page.nowNums"></span>
</span>
<buttonclass="rjFirtPage"ng-click="jumpPage(1,dataList)">首页</button>
<buttonclass="rjPrePage"ng-click="jumpPage(page.now-1,dataList)">上一页</button>
<span>
<spanclass="rjNowPage"ng-bind="page.now"></span>/
<spanclass="rjAllPage"ng-bind="page.pageCount"></span>
</span>
<buttonclass="rjNextPage"ng-click="jumpPage(page.now+1,dataList)">下一页</button>
<buttonclass="rjLastPage"ng-click="jumpPage(page.pageCount,dataList)">尾页</button>
到第
<inputclass="rjJumpInput"type="text"ng-model="page.jumpPage"name="rjPageName"value=""/>
页
<buttonclass="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){
varpage={};//分页对象
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)){
returnnull;
}
getPage(page,dataList);
}
functiongetPage(pageNow,dataList){//获取指定的页面
scope.page.nums=dataList.length;//设置总记录数
scope.page.now=pageNow;//设置当前是第几页
pagination();//设置当前有多少页面 生成一个页面数组
scope.page.orderList=getOnePage(dataList);//获取一页的数据
scope.$emit("orderList", scope.page.orderList);//$emit：子传父，传递event与data；此处用于给父controller传递数据orderList
}
functiongetOnePage(arr){//获取一页的数据
if(arr==null){
returnnull;
}
varnewarr=newArray();
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;
varpagenow=scope.page.now;
varbegin=(pagenow-1)*scope.page.onePageNums;
varend=begin+scope.page.onePageNums;
varlens=scope.page.nums;
if(end>lens){
end=lens;
scope.page.nowNums=lens-begin;
}
for(begin;begin<end;begin++){
newarr.push(arr[begin]);
}
returnnewarr;
}
functionpagination(){//设置当前有多少页面 生成一个页面数组
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;
}
}
}
}
}
});
|
效果如图所示：
