[英]Angularjs pagination in ng-repeat
In my controller I have following code that gets data from the database. 在我的控制器中,我有以下代码从数据库获取数据。
$scope.noOfPages = 0;
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.tickets = TicRepository.getTics.query({ id: $routeParams.t_id }, function (data) {
$scope.tickets = data.items;
$scope.noOfPages = data.totalPages,
$scope.currentPage = data.pages;
});
And in my html I have 在我的html中
<div>
div>
{{noOfPages}} {{currentPage}} {{maxSize}}
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
</div>
<div ng-repeat="tics in tickets " >
................
</div>
</div>
I get the data fine but pagination is not working. 我得到的数据很好,但是分页不起作用。 In pagination buttons it just shows 1 page and lists all items.
在分页按钮中,它仅显示一页并列出所有项目。 Please let me know how to fix this problem.
请让我知道如何解决此问题。 Thanks
谢谢
It looks like you are using ui.bootstrap.pagination
. 看来您正在使用
ui.bootstrap.pagination
。 The pagination
directive keeps track of the current page, but you still have to filter your array. pagination
指令可以跟踪当前页面,但是您仍然必须过滤数组。 One solution is to ng-repeat
over a subset of the array: 一种解决方案是对数组的子集进行
ng-repeat
:
<pagination ng-model="currentPage" total-items="tickets.length" items-per-page="5"></pagination>
<div class="alert alert-info" ng-repeat="tic in paged.tickets">
{{tic}}
</div>
and then update that subset whenever the current page changes: 然后在当前页面更改时更新该子集:
$scope.$watch('currentPage', function() {
var begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
var end = begin + $scope.itemsPerPage;
$scope.paged = {
tickets: $scope.tickets.slice(begin, end)
}
});
Here is a working demo: http://plnkr.co/edit/oFuE6vjI6t0AHhSVt6Gt?p=preview 这是一个有效的演示: http : //plnkr.co/edit/oFuE6vjI6t0AHhSVt6Gt?p=preview
Some other (more sophisticated) options are covered in this related question: Pagination on a list using ng-repeat 此相关问题涉及其他一些(更复杂的)选项: 使用ng-repeat在列表上进行分页
This is how I implemented it which I hope will be helpful for you as a reference. 这就是我实施的方式,希望对您有所帮助。
JS: JS:
$scope.RegionPage = 1;
$scope.RegionRow = 10;
$scope.RegionRows = [5, 10, 20];
$scope.GetAttributesByRegion = function (regionFrwdPageButtonClick, regionBckPageButtonClick) {
if (regionFrwdPageButtonClick) {
if (($scope.RegionPage + 1) <= $scope.RegionTotalPages) {
$scope.RegionPage = $scope.RegionPage + 1;
}
}
if (regionBckPageButtonClick) {
if ($scope.RegionPage <= 0) {
$scope.RegionPage = 1;
} if ($scope.RegionPage > 1) {
$scope.RegionPage = $scope.RegionPage - 1;
}
}
//get all regions
$http({ method: 'GET', url: '/Admin/GetAttributesByRegion', params: { page: $scope.RegionPage, rows: $scope.RegionRow } }).success(function (data, status) {
$scope.Regions = data;
$scope.RegionTotalRecords = 0;
if (data != null && data != '' && JSON.stringify(data) != '[]') {
$scope.RegionTotalPages = parseInt(Math.ceil(data[0].TotalRecords / $scope.RegionRow));
$scope.RegionPages = new Array();
for (i = 1; i <= $scope.RegionTotalPages; i++) {
$scope.RegionPages[i] = i;
}
} else {
$scope.RegionTotalPages = 0;
$scope.RegionPages = null;
}
});
};
HTML: HTML:
<div style="overflow-x: scroll; padding-right: 1px;">
<table class="table table-condensed" style="font-size: 85%; min-width: 650px;">
<thead>
<tr>
<th>Region</th>
<th>State</th>
<th>Neighborhoods</th>
<th>Locations</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="region in Regions">
<td>{{region.RegionName}}</td>
<td>{{region.State}}</td>
<td>{{region.NeigborhoodCount}}</td>
<td>{{region.LocationCount}}</td>
<td>{{region.Revenue}}</td>
<td>
<span class="pull-right">
<a href="#regionDetailsModal" data-toggle="modal">Details</a> /
<!-- TODO Aamir Malcolm -- Please integrate link below -->
<a href="#addNeighborhoodModal" data-toggle="modal">Add a Neighborhood</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row-fluid">
<a href="#addRegionModal" class="btn btn-pinkes span3" style="margin-top: 15px;" data-toggle="modal"><i class="icon-plus icon-white"></i> Add new</a>
<div class="span9 drmc" style="font-size: 85%;">
<button ng-click="GetAttributesByRegion(false,true)" class="btn btn-mini" id="btnBackwardTop" type="button"><i class="icon-arrow-left"></i></button>
Page
<select style="width: auto; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionPage">
<option ng-repeat="regionPage in RegionPages">{{regionPage}}</option>
</select>
of {{RegionTotalPages}}
<button ng-click="GetAttributesByRegion(true,false)" class="btn btn-mini" id="btnForwardTop" type="button"><i class="icon-arrow-right"></i></button>
<select style="width: auto; margin-left: 5px; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionRow">
<option ng-repeat="regionRow in RegionRows">{{regionRow}}</option>
</select>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.