uib-分页不工作 Angularjs

Question

编辑！

添加了更多代码片段并更新了 plunker（再次）

对于 Angular 和一般的编码来说还是很新的。

我尝试并尝试从 Angular Directives 网站实例化 UI 分页。我搜索了 Stack Overflow 和 codeProject 以及其他各种网站。我这辈子都无法让分页正常工作。

我不知道还能尝试什么。我很确定我已经调用了足够多的属性

<uib-pagination
    items-per-page="itemsPerPage"
    ng-model="currentPage"
    max-size="maxSize"
    class="pagination-sm"
    next-text="&raquo;"
    previous-text="&laquo;"
    boundary-links="false" >
</uib-pagination>

和运行控制器：

app.controller('PaginationControl',function ($scope,  $window) {
    // Pagination variables
    $scope.totalItems = 100; //this needs to be changed to represent the total of filtered parks after a search is done and NOT a static number.
    $scope.currentPage = 1;
    $scope.maxSize = 8;
    $scope.itemsPerPage = 10;

});

我不明白的是如何根据搜索结果将分页属性从控制器中硬编码的静态数字更改为动态数字。

这里有一个 Plunker，除了分页功能外，它什么都有。

非常感谢

Answer 1

你的笨蛋有几个问题。您引用了 bootstrap.js 文件而不是 bootstrap.css 文件。您引用了 1.4.5 版的 angular 核心库和 1.4.7 版的 angular 动画库。您引用 jQueryUI 而不是 jQuery。您没有在分页指令中设置 total-items 属性。这是更新后的 plunk，其中显示了分页。更新参考块：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>

uib-分页不工作 Angularjs

uib-pagination NOT working Angularjs

jquery

pagination

angularjs

angular-ui-bootstrap

编辑！