Pagination：
案例
<!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('PaginationDemoCtrl', function ($scope, $log) { $scope.totalItems = 64; $scope.currentPage = 4; $scope.setPage = function (pageNo) { $scope.currentPage = pageNo; }; $scope.pageChanged = function() { $log.log('Page changed to: ' + $scope.currentPage); }; $scope.maxSize = 5; $scope.bigTotalItems = 175; $scope.bigCurrentPage = 1; }); </script> </head> <body> <div ng-controller="PaginationDemoCtrl"> <h4>Default</h4> <uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination> <uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination> <uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination> <uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination> <pre>The selected page no: {{currentPage}}</pre> <button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button> <hr /> <h4>Limit the maximum visible buttons</h4> <h6><code>rotate</code> defaulted to <code>true</code>:</h6> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination> <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination> <h6><code>rotate</code> set to <code>false</code>:</h6> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination> <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination> <h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination> <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre> </div> </body> </html>
uib-pagination 配置
-
boundary-linksC (Default:false) - 是否顯示第一個/最后一個按鈕<uib-pagination total-items="totalItems" ng-model="currentPage" boundary-links="false"> </uib-pagination>
<uib-pagination total-items="totalItems" ng-model="currentPage" boundary-links="true"> </uib-pagination>
-
boundary-link-numbers$ C (Default:false) - 是否總是顯示第一個和最后一個頁碼。如果最大頁碼大於設置的最小顯示頁數,則會在最大或最小頁面和中間頁面之間增加一個按鈕，內容為省略號，如果最大頁碼小於設置的最小顯示頁數，則不顯示省略號按鈕<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" boundary-link-numbers="false" boundary-links="true"> </uib-pagination>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" boundary-link-numbers="true" boundary-links="true"> </uib-pagination>
-
direction-links$ C (Default:true) - 是否顯示之前/下一個按鈕。<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" direction-links="true"> </uib-pagination>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" direction-links="false"> </uib-pagination>
-
first-textC (Default:First) - 第一個按鈕的文本。 -
force-ellipses$ C (Default:false) - 當總頁數大於最大顯示頁數（max-size）顯示省略號按鈕<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" force-ellipses="true"> </uib-pagination><br/> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" force-ellipses="false"> </uib-pagination>
-
items-per-page$ C (Default:10) - 每頁最大顯示條數的數量。值小於1表明所有項目在一個頁上。 -
last-textC (Default:Last) - 最后一個按鈕的文本。 -
max-size$ (Default:null) - 限制分頁按鈕顯示的數量大小。 -
next-textC (Default:Next) - 下一個按鈕的文本 -
ng-change$ - 點擊分頁按鈕觸發的方法，可用於更改不同頁面數據 -
ng-disabled$ (Default:false) - 用於禁用分頁組件。 -
ng-model$ - 當前頁數. 第一頁為1（即從1開始計算而不是0）. -
num-pages$ readonly (Default:angular.noop) - 一個可選的配置，顯示頁面總數(這是個只讀項，並不是可以通過設置頁面數和當前頁配置分頁). -
page-label(Default:angular.identity) - 可選的表達式，以覆蓋基於傳遞當前頁面索引的頁標簽。$scope.pageLabel = '^_^';
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" boundary-links="true" boundary-link-numbers="true" max-size="maxSize" page-label="pageLabel"> </uib-pagination> <p>{{pageLabel}}</p>
-
previous-textC (Default:Previous) - 上一個按鈕的文本 -
rotate$ C (Default:true) - 是否將當前激活頁顯示在中間。<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" force-ellipses="'3'" boundary-links="true" boundary-link-numbers="true" max-size="maxSize" rotate="true"> </uib-pagination> <uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" force-ellipses="'3'" boundary-links="true" boundary-link-numbers="true" max-size="maxSize" rotate="false"> </uib-pagination>
-
template-url(Default:uib/template/pagination/pagination.html) - 重寫用於具有自定義模板提供的組件模板。 -
total-items$ - 所有頁中的項目總數