建站
咨询
售后
建站咨询
angular分页指令操作
目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下：
十多年的尚义网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整尚义建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“尚义网站设计”,“尚义网站推广”以来，每个客户项目都认真落实执行。
index.html
| {{l.time}} |
index.js
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;
});
});
指令模板 page.html
总记录数： 本页记录数： / 到第 页
指令定义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; //每页记录数
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.$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.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效果如图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
本文名称：angular分页指令操作
浏览路径：http://www.jxjierui.cn/article/jcogdp.html
