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
新聞熱點
疑難解答