我一直在尝试合并dir-pagination-controls
,但无法根据所选页面显示页面。
<div ng-controller="TableController as tc">
<table>
<tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
<tr ng-click="tc.showOrderDetail(order.id)">
<td ng-bind="order.id"></td>
<!-- Simliar lines are here -->
</tr>
</tbody>
</table>
<dir-pagination-controls
boundary-links="true"
on-page-change="tc.pageChangeHandler(newPageNumber)"
template-url="dirPagination.tpl.html">
</dir-pagination-controls>
</div>
这个table
展示了我的期望。然而,当我按下它的任何按钮时,生成的分页控制器都不会显示下一页。
这是剧本的相关部分。
angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){
var instance = this;
this.orders = [];
$http({
//works fine
}).then(function (response) {
instance.orders = response.data;
instance.totalOrders = instance.orders.length;
//The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
});
this.pageChangeHandler = function(num) {
console.log('going to page ' + num);
};
this.pageChanged = function(newPage) {
getResultsPage(newPage);
};
UPDATEpageChangeHandler
显示按下了哪个按钮,但页面不会更改。(其他都很好。)
这段代码是基于官方文档及其演示的,但我找不到真正的错误。
如果你能给我什么建议,我将不胜感激。
解决方案是从dir-paginate
指令中删除total-items
。这里有一个简单的例子。
total-items
属性用于异步调用以获取每个页面项。所以,第一个异步调用获取第一个页面的项,当您更改页面时,您应该从服务器获取相应页面的项。total-items
告诉分页指令您总共有多少页,因此它知道如何构建元素。
如果您希望对每个页面进行异步调用,则可以使用total-items
,并在执行另一个异步调用时实现pageChanged
。
$scope.pageChanged = function(newPage) {
// get orders for newPage number
$http.get(...).then(function(response) {
// orders for newPage number fill the same 'orders' array
this.orders = response.data
});
}