angular-ui-bootstrap插件API - Pager
Pager:
案例
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href='../node_modules/bootstrap/dist/css/bootstrap.css'>
<link rel="stylesheet" href='../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css'>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<script>
angular.module('myApp',['ui.bootstrap'])
.controller('PagerDemoCtrl', function($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
});
</script>
</head>
<body>
<div ng-controller="PagerDemoCtrl">
<h4>Pager</h4>
<pre>You are currently on page {{currentPage}}</pre>
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
</div>
</body>
</html>
效果:
uib-pager 设置
align
C (默认:true
) - 是否向两边对齐,默认为true.
<uib-pager
total-items="totalItems"
ng-model="currentPage"
align="false"
></uib-pager>items-per-page
$ C (默认:10
) -每页显示的最大条数。 比一个少一个值,指示一个页面上的所有项目。<uib-pager
total-items="totalItems"
ng-model="currentPage"
items-per-page="itemsPerPage"
></uib-pager>next-text
C (默认:Next »
) - 下一个按钮文本默认“Next »
”.ng-disabled
$ (默认:false
) - 禁用页导航组件<uib-pager
total-items="totalItems"
ng-model="currentPage"
ng-disabled="true"
></uib-pager>ng-model
$ - 当前页数. 第一页为1(即从1开始计算而不是0).num-pages
$ readonly (默认:angular.noop
) - 一个可选的配置,显示页面总数(这是个只读项,并不是可以通过设置页面数和当前页配置分页).<script>
angular.module('myApp',['ui.bootstrap'])
.controller('PagerDemoCtrl', function($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
//$scope.numPage我并没定义
});
</script>
<div ng-controller="PagerDemoCtrl">
<h4>Pager</h4>
<pre>总页数 {{numPage}}</pre>
<pre>当前页 {{currentPage}}</pre>
<uib-pager
total-items="totalItems"
num-pages="numPage"
ng-model="currentPage"
></uib-pager>
</div>previous-text
C (默认:« Previous
) - 上一个按钮文本默认“« Previous
”.template-url
(默认:uib/template/pager/pager.html
) - 重写用于具有自定义模板提供的组件模板。total-items
$ - 所有页中的项目总数
angular-ui-bootstrap插件API - Pager的更多相关文章
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
- jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
- 20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- angular-ui-bootstrap插件API - Tabs
Tabs 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> ...
- angular-ui-bootstrap插件API - Pagination
Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...
随机推荐
- Build MySQL 5.7.4 in RedHat
Install Cmake 1. download cmake source code at http://www.cmake.org/files/v3.1/cmake-3.1.0.tar.gz 2 ...
- DES加密解密帮助类
public class DESCrypto { /// <summary> /// 初始化des实例秘钥及向量 /// </summary> /// <param na ...
- elasticsearch文档-analysis
elasticsearch文档-analysis analysis 基本概念 全文搜索引擎会用某种算法对要建索引的文档进行分析, 从文档中提取出若干Token(词元), 这些算法称为Tokeniz ...
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- textarea定位光标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
- - 高级篇:二,IL设置静态属性,字段和类型转换
- 高级篇:二,IL设置静态属性,字段和类型转换 静态属性赋值 先来看 Reflector反射出的IL源码(感谢Moen的提示),这次用 Release模式编译,去掉那些无用的辅助指令 public ...
- BizTalk 2010/2013 EDI B2B
BizTalk 2010/2013 EDI B2B项目实践(1) BizTalk 2010/2013 EDI B2B项目实践(1) BizTalk开发标准EDI B2B是件非常容易的事情,但对于初 ...
- Android ListView中添加不同的多种布局
最近做项目要使用ListView加载不同的布局,由于自己写的代码不能贴出,故找了一篇自认为比较好的blog给分享出来,希望对用到此项技术的同学有点帮助. http://logc.at/2011/10/ ...
- 使用Bundle在Activity之间交换数据
一:在main.xml文件中设置布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...