嗨,我需要在ng-repeat中实现分页。我正在从webAPI获取数据..html和controller中的源代码如下。
我已经在控制器和.html页面中提到了ng-repeat的分页逻辑。但是该分页无法正常工作。请查看下面提供的源代码,并建议如何修复它。
控制器:
$http({
method: 'Post',
url: 'http://localhost:53583/api/Values/PostEmployeeData',
dataType: 'json',
data: $.param(empDetails),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function (data) {
$scope.itemsPerPage = 5;
$scope.currentPage = 0;
$scope.object = [];
angular.module('ABC.Employer').filter('offset', function () {
return function (input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
for (var i = 0; i < 10; i++) {
$scope.object.push(data[i]);
}
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function () {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function () {
return Math.ceil($scope.items.length / $scope.itemsPerPage) - 1;
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function () {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
.html
<table st-table="rowCollection" ng-class="panel-body12" class="table table-striped">
<thead>
<tr>
<th style="text-align:center">Name</th>
<th style="text-align:center">Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ob in object" offset: currentPage*itemsPerPage |limitTo: itemsPerPage">
<td><a style="text-align:center" data-ng-click="selectCall(ob.NAME,ob.Employer_Key,ob.Plan_key)">{{ob.NAME}}</a></td>
<td style="text-align:center">{{ob.VALUE}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()"
ng-class="{active: n == currentPage}" ng-click="setPage(n)">
<a href="#">{{n+1}}</a>
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>