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

Pager：

效果：

uib-pager 设置

最新文章

热门文章