【问题标题】:How to assign value to angular pagination custom template?如何为角度分页自定义模板赋值?
【发布时间】:2017-01-18 07:38:02
【问题描述】:

我正在使用自定义模板进行角度分页:

            <uib-pagination
                boundary-links="(vm.pagination.boundaryLinks == false) ? false : true"
                num-pages="vm.pagination.numPages"
                total-items="vm.pagination.totalItems"
                items-per-page="vm.pagination.itemsPerPage"
                ng-model="vm.pagination.currentPage"
                max-size="(vm.pagination.pager == true) ? 0 : 10"
                template-url="pagination.html"            
                ng-change="vm.pagination.pageChanged(vm.pagination)">
            </uib-pagination>

<script id="pagination.html" type="text/ng-template">
  <ul class="pagination">
    <li ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)" title="First Page"> {{'FIRST' | translate}}</a></li>
    <li ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)" title="Previous Page">{{'PREVIOUS' | translate}}</a></li>
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
    <li ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)" title="Next Page">{{'NEXT' | translate}}</a></li>
    <li ng-class="{disabled: noNext()}"><a href ng-click="selectPage(vm.pagination.numPages)" title="Last Page">{{'LAST' | translate}}</a></li>
  </ul>
</script>
<pre>Total: {{vm.pagination.numPages}}</pre>

它显示得很好:

问题出在Last 按钮上。当我点击它时,它不会跳到最后一页。但是如果我像ng-click="selectPage(11)这样直接赋值并单击Last按钮,它将跳转到最后一页11。

使用上面的最后一个代码,vm.pagination.numPages 确实包含值 11

谁能帮我解决这个问题?提前致谢。

【问题讨论】:

    标签: javascript angularjs pagination angular-ui-bootstrap angular-ui


    【解决方案1】:

    您的分页模板具有孤立的范围,因此对vm 一无所知。改用selectPage(totalPages)

    【讨论】:

    • 非常感谢。它确实有效。你怎么知道totalPages btw?我在这里查找文档 angular-ui.github.io/bootstrap/#/pagination 并且没有关于 totalPages 关键字的内容。
    • 我只是有一些使用角度引导分页的经验,所以我看了一下源代码
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-02-29
    • 2016-03-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-26
    相关资源
    最近更新 更多