微客导航 » 文章资讯 » AngularJs分页插件使用详解

AngularJs分页插件使用详解

2023-09-10 22:29:05 289

angularUIbootstrap提供的分页插件满足了大部分应用的需求，具体内容如下

在项目需求中，新增了两个需求：

1.自由设定每页显示的条目；

2.可以手动输入页面，跳转到指定的页数。

html代码

css代码

.pagination-define{
text-align:center
}
.pagination-defineinput,.pagination-defineselect{
padding-left:3px;
height:30px;
vertical-align:top;
border:1pxsolid#ccc;
border-radius:4px;
width:50px;
}
.pagination{
margin:0;
}
.pagination-define.btn-30h{
vertical-align:top;
}
.btn-30h{
padding-top:4px;
padding-bottom:4px;
}

Javascript代码

app.directive('cusMaxNumber',['$timeout',function($timeout){
return{
restrict:'EA',
require:'ngModel',
scope:{
maxNumber:'@cusMaxNumber',
currentPage:'@currentPage'
},
link:function(scope,element,attr,ctrl){
ctrl.$parsers.push(function(viewValue){
varmaxNumber=parseInt(scope.maxNumber,10);
varcurNumber=scope.currentPage;//当前页数
vartransformedInput=viewValue.replace(/[^0-9]/g,'');
if(transformedInput!==viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber){
ctrl.$setViewValue(curNumber);
ctrl.$render();
returncurNumber;
}
returnviewValue;
});
}
};
}])
.directive('cusPagination',[function(){
return{
restrict:"E",
templateUrl:'views/template/pagination.html',
scope:{
numPerPage:"=numPerPage",
totalItems:"=totalItems",
currentPage:"=cusCurrentPage",
perPageSize:"=perPageSize",
inputCurPage:"=inputCurPage",
maxPages:"=maxPages",
pageChanged:"&pageChanged"
},
replace:false
};
}]);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

AngularJs分页插件使用详解

热门推荐

随机推荐