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>

效果:

angular-ui-bootstrap插件API - Pager-LMLPHP

uib-pager 设置

  • align C (默认: true) - 是否向两边对齐,默认为true.
      

    <uib-pager
    total-items="totalItems"
    ng-model="currentPage"
    align="false"
    ></uib-pager>

      angular-ui-bootstrap插件API - Pager-LMLPHP

  • items-per-page $ C  (默认10) -每页显示的最大条数。 比一个少一个值,指示一个页面上的所有项目。

    <uib-pager
    total-items="totalItems"
    ng-model="currentPage"
    items-per-page="itemsPerPage"
    ></uib-pager>

    angular-ui-bootstrap插件API - Pager-LMLPHP

  • next-text C (默认Next ») - 下一个按钮文本默认“Next »”.

  • ng-disabled $  (默认false) - 禁用页导航组件

    <uib-pager
    total-items="totalItems"
    ng-model="currentPage"
    ng-disabled="true"
    ></uib-pager>

    angular-ui-bootstrap插件API - Pager-LMLPHP

  • 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>

    angular-ui-bootstrap插件API - Pager-LMLPHP

  • previous-text C (默认« Previous) - 上一个按钮文本默认“« Previous”.

  • template-url (默认uib/template/pager/pager.html) - 重写用于具有自定义模板提供的组件模板。

  • total-items $  - 所有页中的项目总数

04-23 08:17