Реализация динамической разбивки на страницы с помощью UIBootstrap в AngularJS

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 на код ниже:

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

Код для нг-повтора:

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