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

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

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

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

ng-repeat 的代码：

<tr ng-repeat="person in persons.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.city }}</td>
</tr>