目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令。直接贴代码,详情如下:
index . html
& lt;身体id=" sBill " ng-controller=癿ap_ctrl”比;
& lt;表类=氨聿鹂?一张表”在
& lt; tbody>
orderList & lt; tr ng-repeat=發”在
& lt; td> & lt;输入类型=肮悴ァ眓ame=" id " ng-click="选择"按钮(l.id) value=" https://www.yisu.com/zixun/{{l.id}} "/祝辞& lt;/td>
& lt; td> {{l.time}} & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
& lt; !——分页datalist属性值(datalist)为要分页的原始数据——比;
& lt; rj-date datalist=" datalist "祝辞& lt;/rj-date>
& lt;/body>
之前
index.js
应用var=angular.module (“doSBill”, []);
app.controller (“map_ctrl函数(范围、http、美元位置,美元超时){//原始数据
$ scope.dataList=(
{“时间”:1},{“时间”:2},{“时间”:3},{“时间”:4},{“时间”:5},{“时间”:6},{“时间”:7},{“时间”:8},{“时间”:9},{10}“时间”:,
{“时间”:11},{“时间”:12},{“时间”:13},{“时间”:14},{“时间”:15},{“时间”:16},{“时间”:17},{“时间”:18},{“时间”:19},{20}“时间”:,
{“时间”:21},{“时间”:22},{“时间”:23},{“时间”:24},{“时间”:25},{“时间”:26},{“时间”:27},{“时间”:28日},{“时间”:29},{“时间”:30},
{“时间”:31}
];//美元:监听或接收数据,此处用于监听分页指令,修改的列表视图数据
美元的范围。美元(“orderList函数(e, orderList) {
美元的范围。orderList=orderList;
}）;
}）;
之前
,指令模板,page.html
& lt; div>
& lt; p>
& lt; span>
总记录数:& lt;跨类=皉jAllNums ng-bind”=皃age.nums”祝辞& lt;/span>
本页记录数:& lt;跨类=皉jNowNums ng-bind”=皃age.nowNums”祝辞& lt;/span>
& lt;/span>
& lt;按钮类=皉jFirtPage ng-click”=癹umpPage (dataList)”在首页& lt;/button>
& lt;按钮类=皉jPrePage ng-click”=癹umpPage (page.now-1 dataList)”在上一页& lt;/button>
& lt; span>
& lt;跨类=皉jNowPage ng-bind”=皃age.now”祝辞& lt;/span>/& lt;跨类=皉jAllPage ng-bind”=皃age.pageCount”祝辞& lt;/span>
& lt;/span>
& lt;按钮类=皉jNextPage ng-click”=癹umpPage (page.now + 1, dataList)”在下一页& lt;/button>
& lt;按钮类=皉jLastPage ng-click”=癹umpPage (page.pageCount dataList)”在尾页& lt;/button>
到第
& lt;输入类=" rjJumpInput " type="文本" ng-model="页面。jumpPage“name=" rjPageName " value="/比;
页
& lt;按钮类=皉jJumpBtn ng-click”=癹umpPage (page.jumpPage dataList)“祝辞确定& lt;/button>
& lt;/p>
& lt;/div>
之前
指令定义page.js
app.directive (rjDate,函数(){
返回{
限制:“EA”,
替换:假的,
范围:{dataList:“=dataList”},//设置scope.dataList与指令属性“dataList”值绑定,详情看指令吟游诗人作用域
templateUrl:“pageDirective/模板/page.html’,
链接:函数(范围、elem attr) {
var页面={};//分页对象
scope.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(页面、dataList) {
如果(!方法(页面)){
返回null;
}
getPage(页面,dataList);
}
函数getPage (pageNow dataList){//获取指定的页面
scope.page.nums=dataList.length;//设置总记录数
scope.page.now=pageNow;//设置当前是第几页
分页();//设置当前有多少页面生成一个页面数组
scope.page.orderList=getOnePage (dataList);//获取一页的数据
范围。发出(“orderList”, scope.page.orderList);美元//$排放:子传父,传递事件与数据;此处用于给父控制器传递数据orderList
}
函数getOnePage (arr){//获取一页的数据
如果(arr==null) {
返回null;
}
var newarr=new Array ();
如果(scope.page.now<1) {
scope.page.now=1;
}
如果(scope.page.now> scope.page.pageCount) {
scope.page.now=scope.page.pageCount;
}
scope.page.nowNums=scope.page.onePageNums;
var pagenow=scope.page.now;
var=(pagenow-1) * scope.page.onePageNums开始;
var=开始+ scope.page.onePageNums结束;
var镜头=scope.page.nums;
如果(end>透镜){
结束=镜头;
scope.page.nowNums=lens-begin;
}
(开始;begin
