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的更多相关文章

  1. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  2. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  3. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  4. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  5. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

  6. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  7. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  8. angular-ui-bootstrap插件API - Tabs

    Tabs 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> ...

  9. angular-ui-bootstrap插件API - Pagination

    Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <h ...

随机推荐

  1. 使用shell+awk完成Hive查询结果格式化输出

    好久不写,一方面是工作原因,有些东西没发直接发,另外的也是习惯给丢了,内因所致.今天是个好日子,走起! btw,实际上这种格式化输出应该不只限于某一种需求,差不多是通用的. 需求: --基本的:当前H ...

  2. angularjs + seajs构建Web Form3

    angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...

  3. 职责链模式实例（C#）

    下面是使用指责链模式的一个具体的实例,可以方便的理解指责链模式. 其实指责链简单的来说,就是把一个指责的流程定义出来,像一条链路一样,每一个结点有自己的处理范围,若不能处理,则传到自己的引用的下一个结 ...

  4. Dynamicaly Typed(动态定型), Objective-C Runtime Programming

    Objective-C跟C最大的差别,应该是动态定型(dynamicaly typed),支持在运行时动态类型决议(dynamic typing),动态绑定(dynamic binding)以及动态装 ...

  5. mvc的验证

    mvc的验证锦上添点花(2) 上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSucces ...

  6. DAS,NAS,SAN在数据库存储上的应用

    DAS,NAS,SAN在数据库存储上的应用 一. 硬盘接口类型1. 并行接口还是串行接口(1) 并行接口,指的是并行传输的接口,比如有0~9十个数字,用10条传输线,那么每根线只需要传输一位数字,即可 ...

  7. phpredis扩展

    <?php $redis = new Redis(); $redis->connect('127.0.0.1',6379); $redis->set('test','hello wo ...

  8. Windows系统架构

    操作系统模型   大多数操作系统中,都会把应用程序和内核代码分离运行在不同的模式下.内核模式访问系统数据和硬件,应用程序运行在没有特权的模式下(用户模式),只能使用有限的API,且不能直接访问硬件.当 ...

  9. Redis 集成Spring（spring-data-redis）

    Spring-data-redis是spring大家族的一部分,提供了在srping应用中通过简单的配置访问redis服务,对reids底层开发包(Jedis,  JRedis, and RJC)进行 ...

  10. 第 1 章 Node.js 介绍

    本章内容包括: 什么是 Node.js 框架,为什么要用 Node.js 框架,使用 Node.js 框架能够解决什么问题,在哪些场合下应该考虑使用 Node.js 框架. 如何下载 Node.js ...