如何使用 Angular UI Bootstrap 进行分页？

Angular UI Bootstrap 是一个以 Bootstrap 为基础的 AngularJS UI 组件库，除了包含了 Bootstrap 原有的组件之外，还额外提供了一些 AngularJS 特有的组件。其中，分页组件是很实用的一个组件，本文将介绍如何使用 Angular UI Bootstrap 进行分页。

安装

使用 Angular UI Bootstrap 进行分页需要先安装该组件库，使用 Bower 安装方法如下：

$ bower install angular-ui-bootstrap

引入

在 HTML 文件中引入 ui-bootstrap-tpls.js 即可：

<script src="bower_components/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>

请注意，ui-bootstrap-tpls.js 中包含了所有的 UI 组件，若只需要使用分页组件，需要注意减小依赖大小的问题。

使用

控制器中设置

在控制器中，需要设置 $scope.currentPage、$scope.itemsPerPage、$scope.totalItems 这三个变量。其中：

• $scope.currentPage 表示当前页码
• $scope.itemsPerPage 表示每页要显示多少条记录
• $scope.totalItems 表示数据总共有多少条记录

例如：

$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.totalItems = 50;

这里设置了每页显示 10 条记录，总共有 50 条记录。

HTML 模板中使用

在 HTML 模板中，使用以下代码即可插入分页组件：

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

其中，ng-model、total-items 和 items-per-page 分别对应控制器中设置的 $scope.currentPage、$scope.totalItems 和 $scope.itemsPerPage。

属性

分页组件还有很多自定义的属性，可以根据具体需要进行配置，下面是一些常用的属性介绍：

boundary-links

可选值为 true 或 false，表示是否显示首尾页连接。

<pagination boundary-links="true"></pagination>

direction-links

可选值为 true 或 false，表示是否显示上一页下一页连接。

<pagination direction-links="true"></pagination>

first-text

表示首页按钮的文本，可自定义。

<pagination first-text="<<" last-text=">>"></pagination>

last-text

表示尾页按钮的文本，可自定义。

<pagination first-text="<<" last-text=">>"></pagination>

max-size

控制分页中最多显示多少页码按钮，若不设置，则全部显示。

<pagination max-size="5"></pagination>

rotate

可选值为 true 或 false，表示是否分页按钮是否循环显示。

<pagination rotate="true"></pagination>

num-pages

返回当前分页的总页数，可在控制器中使用。

console.log($scope.numPages);

结语

以上就是如何使用 Angular UI Bootstrap 进行分页的介绍，希望对大家有所帮助。 Angular UI Bootstrap 还有很多其他的实用的组件，感兴趣的可以去看看官方文档。