angularjs实现的前端分页控件示例

前言：之前写个一个jQuery的分页显示插件，存在许多的臭虫，现在由于业务需要，学习的一点AngularJS，重新用angularjs实现了这个分页插件

实现效果图：

（效果图是加上了引导程序的钢性铸铁文件)

用法：

angular-pagination.js代码：

/** * angularjs分页控件*由陈于2016/11/1创建*/angular.module('myModule '，[]).指令(“我的分页”，函数(){ return { restrict: 'EA '，replace: true，作用域： { option : '=page option ' }，模板： ' ul class=' pagination ' ' ' Li ng-click=' page click(p)' ng-repeat=' p in page ' class=' { { option。curr==p？\ ' active ' : \ ' \ ' } } ' ' ' a href=' JavaScript :rel='外部无跟随' { p } }/a ' '/Li ' '/ul '，link:函数($scope) { //容错处理if(！$ scope。选项。curr | | ISnan($ scope。选项。curr)| $ scope。选项。curr 1)$ scope。选项。curr=1；if(！$ scope。选项。all | | ISnan($作用域。选项。all)| $ scope。选项。所有1)$范围。选项。all=1；if($ scope。选项。curr $范围。选项。all)$ scope。选项。curr=$ scope。选项。全部；if(！$ scope。选项。count | | ISnan($ scope)。选项。count)| $ scope。选项。计数1)$作用域。选项。计数=10；//得到显示页数的数组$ scope。page=GetRange($ scope)。选项。curr，$scope.option.all，$scope .选项。计数)；//绑定点击事件$ scope。page click=function(page){ if(page==' '){ page=ParSeint($ scope)。选项。curr)-1；} else if(page==' '){ page=ParSeint($ scope)。选项。curr)1；}如果(第一页)页面=1；else if(page $ scope。选项。all)page=$ scope。选项。全部；//点击相同的页数不执行点击事件if (page==$scope.option.curr)返回；if($ scope。选项。单击$ scope的类型。选项。单击==' function '){ $ scope。选项。点击(页面)；$ scope。选项。curr=page$ scope。page=GetRange($ scope)。选项。curr，$scope.option.all，$scope .选项。计数)；} };//返回页数范围（用来遍历)函数getRange(curr，all，count) { //计算显示的页数curr=ParSeint(curr)；all=ParSeint(all)；count=parseInt(计数);var from=curr-ParSeint(count/2)；var to=curr parseInt(计数/2)(计数% 2)-1;//显示的页数容处理if(from=0){ from=1；to=from count-1；if(to all){ to=all；} } if(to all){ to=all；from=to-count 1；if(from=0){ from=1；} } var范围=[];for(var I=from；i=toI){ range。推(我)；}范围。push(')；范围。unshift(" ")；返回范围；} } }});index.html代码：

！doctype html html ng-app=' app ' head meta charset=' UTF-8 ' title angularjs分页控件/title脚本src=' http : angular。量滴js '/脚本！-引入angularjs文件，而且是1.x版本的-脚本src=' http : angular-paging。js '/脚本！-引入angularjs分页控件-脚本src=' http : app。js '/脚本！-引入app.js - /headbody！-控制器- div ng-controller='myCtrl '！-分页控件指令，可以是元素或者属性-my-paging page-option=' option '/my-paging/div/body/html app。射流研究…代码：

//引入' myModele '模块var app=angular.module ('app '，[' my module '])；App。contriler(' my ctrl '，function($ scope){//设置分页参数$scope.option={curr: 1，//当前页码all3360 20，//总页数： 10，//最大显示页码，默认值为回调函数10 //点击的页数，参数页为pages clicked : function(page){ console . log(page)；//这里可以写跳转到一个页面等.}});以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。