bootstrap-ui pagination的一个坑!
问题描述:当用来自 $state
相应的页索引来初始化Controller时发生,angular-bootstrap-ui的 pagination
指令会初始化和触发 ng-change
事件并把页码重置为1,导致无法正确跳转到指定页面。("angular-ui-bootstrap": "^0.13.3"
)
解决方式:在pagination外边加ng-if判断total-items对应的总条数modal值是否大于0
例如:
<div class="row text-center" ng-if="vm.total"> <pagination total-items="vm.total" items-per-page="vm.pagination.pageSize" ng-model="vm.pagination.page" max-size="maxSize" class="pagination bootpag" num-pages="totalPages" ng-change="vm.pageChanged()" ng-click="vm.clickPagination()"> </pagination></div>原因:
查看bootstrap-ui源码,会发现它监听了totalPages,并判断当前页索引是否大于总页数,假如,当我们位于第3页,并刷新了页面,该页面会立即为页面重新加载数据列表,造成
total-items
变为0,totalPages就会被计算为1。然后就触发了上面提到的代码的监听器。外面加ng-if就是避免了pagination过早的做了错误的计算。也可以把数据加载放到ui-router的resolve中。
参考:
ui-bootstrap pagination resetting current page on initializationPagination always starts on 1 even if a different starting point is passed
新闻热点
疑难解答