Question

我是angularjs的新手。我正在使用https://angular-ui.github.io/bootstrap/#/pagination。我有一些问题：style class =“pagination pagination-lg”无法正常工作，我正在使用bootstrap版本4.帮帮我。谢谢

error image here

的index.html

<div>
        <pre>You are currently on page {{userCtrl.page}}</pre>
        <ul uib-pagination total-items="userCtrl.totalElements" ng-model="userCtrl.page" max-size="10000" class="pagination pagination-lg"
            boundary-links="true" num-pages="userCtrl.totalPages">
        </ul>
    </div>

userController.js

module.exports = function (UserService) {
    var _this = this;
    _this.users = [];
    _this.page = [];
    _this.size = [];
    _this.totalElements = [];
    _this.totalPages = [];

    _this.list = function () {
        UserService.getUsersPage().then(function (response) {
            console.log(response);
            _this.users = response.content;
            _this.page = response.number;
            _this.size = response.numberOfElements;
            _this.totalElements = response.totalElements;
            _this.totalPages = response.totalPages;
        })
    };
    _this.list();
};

Answer 1

你检查了分页组件DOM结构吗？ uiBootstrap已经过版本3.3.6的测试，所以比较两个版本：

<强> V3

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<强> V4：

{{1}}

我确定你看到v3中元素缺少css类;）

https://angular-ui.github.io/bootstrap/#/pagination class =“pagination pagination-lg”在bootstrap 4中不起作用

1 个答案: