闲来没事，分享下项目中自己写的分页组件。来不及了，直接上车。

效果：

输入框可任意输入，并会自动提交到该页

依赖项：

自举

html:

ul class=' page clear fix ' Li ng-hide='当前页面=1 ' a href=' ng-click=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '第一页()' I class=' fa-step-backward '/I/a href=' ng-click=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' prePage()' I class=' fa fa-fa '页码/span输入类型=' text ' ng-model=' current page '/span ng-bind=' total page '/span/Li ng-hide=' current page=total page ' a href=' ng-click=' rel=' external nofollow ' rel=' external nofollow ' nextPage()' I class=' fa fa-play '/I/a href=' ng-click=' rel=' external nofollow ' rel=' external nofollow ' rel='

/* 分页*/.第{边际：页15px 0；padd : 0；向右浮动：}.第里页{ list-style:无；向左浮动：高度： 30px线高： 30px}.页面里输入{ padding: 3px 5px高度： 100%;宽度： 50pxborder:无；背景-颜色： # EAEEF 1；文本对齐：中心；右边距： 10px}.页面Li span { margin-right : 15px；}.页面阿利{文本-装饰：无；大纲：无；右边距： 15px}方向：

App.directive('paging '，function() { //分页返回{ restrict: 'A '，replace: true，作用域： { total page : '=total page '，currentPage: '=currentPage '，getData: 'getData' }，模板URL : ' app/view/partials/paging。' html '，控制器：函数($ scope){ $ scope。第一页=function(){ $ scope。当前页面=1；} $ scope。LastPage=function(){ $ scope。CurrentPage=$ scope。TotalPage} $ scope。prep ge=function(){ $ scope。当前页面-；} $ scope。下一页=function(){ $ scope。当前页面；} $scope .$watch('currentPage '，函数(纽瓦尔，旧瓦尔){ if(纽瓦尔！=oldVal newVal)$作用域。getdata()；}) } };});参数：

totalPage:总页数，currentPage:当前页，getData:点击分页所触发的函数用法：

控制器：

$ scope。current _ page=1；//当前页$ scope。getdata=function(){ $ scope。帕拉姆。page=$ scope。当前页面；ConnectApi.start('post '，' index/student/get school class list '，$scope.param).然后（函数（响应){ //这个ConnectApi你大可不必关心，这是我封装的超文本传送协议(超文本传输协议的缩写)函数var数据=connectapi。数据({ RES :响应，_ index :索引})；$ scope。数据=数据。数据；$ scope。总页数=数据。数据。total _ page//服务器端返回的总页数} } $ scope。getdata()；//获取数据的函数html:

差异分页合计-page=' total page ' current-page=' current _ page ' get-data=' getData()'/div以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。