uib-pagination不工作Angularjs

时间:2015-12-08 19:54:06

标签: jquery angularjs pagination angular-ui-bootstrap

EDIT!

添加了更多代码段和更新的plunker(AGAIN)

一般来说,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除了分页之外什么都有。

非常有责任

1 个答案:

答案 0 :(得分:2)

你的插件有几个问题。您引用了bootstrap.js文件而不是bootstrap.css文件。您引用了版本1.4.5的角度核心库和版本1.4.7的角度动画库。你引用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>