Question

我正在向服务器发送HTTP请求，并从服务器或数据库获取具有预期数据的结果。好吧，我不知道如何将结果与我的分页结合起来。目前只有页码是正确的。但是点击页码并不能通过接下来的10个项目。

首先我的观点是：

...
<tr ng-repeat="person in filteredPersons">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.city }}</td>
</tr>
...

<pagination boundary-links="true" 
                    total-items="totalItems" 
                    ng-model="currentPage" 
                    class="pagination-sm" 
                    previous-text="&lsaquo;" 
                    next-text="&rsaquo;" 
                    first-text="&laquo;" 
                    last-text="&raquo;"
                    items-per-page="itemsPerPage">
</pagination>
...

然后用功能键Ctrl：

$scope.currentPage = 1;
$scope.itemsPerPage = 10;

$scope.changeDate = function (datum) {
    CrudService.getByDay(datum).$promise.then(
         function (resp) {
            $scope.persons = resp;
            $scope.pageCount = function () {
                return Math.ceil($scope.persons.length / $scope.itemsPerPage);
            };

            $scope.persons.$promise.then(
                 function () {
                    $scope.totalItems = $scope.persons.length;
                    $scope.$watch('currentPage + itemsPerPage', function () {

                          var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                              end = begin + $scope.itemsPerPage;

                          $scope.filteredPersons = $scope.persons.slice(begin, end);
                    });
                 });
         });
}

我有哪些可能性？也许在过滤器中外包代码会更好吗？

Answer 1

使用以下代码更改您的分页代码：

1.13

ng-repeat的代码：

<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

在AngularJS中使用UIBootstrap实现动态分页

1 个答案: