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
$ - 所有页中的项目总数