AngularJs分页插件使用详解


Posted in Javascript onJune 30, 2018

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

在项目需求中,新增了两个需求:

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

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

html代码

<div class="pagination-define p20 mt20" ng-hide="totalItems==0">
 <select ng-model="perPageSize" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" >
  <option value=10 ng-selected="perPageSize==10">10</option>
  <option value=20>20</option>
  <option value=30>30</option>
  <option value=50>50</option>
  <option value=100>100</option>
 </select>
 <uib-pagination items-per-page="numPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" max-size="5" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination>
 <input type="text" ng-model="inputCurPage" min=1 cus-max-number ="{{maxPages}}" current-page="{{currentPage}}">
 <button class="btn btn-info btn-30h" ng-click="pageChanged({currentPage:inputCurPage,perPageSize:perPageSize})" ng-disabled="inputCurPage==''||submitting">Go</button>
</div>

css代码

.pagination-define{
 text-align: center
}
.pagination-define input, .pagination-define select {
 padding-left: 3px;
 height: 30px;
 vertical-align: top;
 border: 1px solid #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) {
     var maxNumber = parseInt(scope.maxNumber, 10);
     var curNumber = scope.currentPage; //当前页数
     var transformedInput = viewValue.replace(/[^0-9]/g, '');
     if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) {
      ctrl.$setViewValue(curNumber);
      ctrl.$render();
      return curNumber;
     }
     return viewValue;
    });
   }
  };
 }])
.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
  };
 }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
将list转换为json失败的原因
Dec 17 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 #Javascript
vue检测对象和数组的变化分析
Jun 30 #Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
You might like
Zend 输出产生XML解析错误
2009/03/03 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php数组查找函数总结
2014/11/18 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
py中的目录与文件判别代码
2008/07/16 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
资深地理教师自我评价
2013/09/21 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
设计顾问服务计划书
2014/05/04 职场文书
教师节倡议书
2014/08/30 职场文书
六查六看六改心得体会
2014/10/14 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
英语导游欢迎词
2015/09/30 职场文书
Python基础之pandas数据合并
2021/04/27 Python