angular-ui-bootstrap插件API - 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的详细内容...