在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>