带角度的分页

Question

我想对 7 个结果进行分页，这是我为此创建的分页标签：

<pagination 
            ng-model="currentPage"
            total-items="array.length"
            max-size="maxSize"
            boundary-links="true">
        </pagination>

和控制器代码：

exampleApp.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
    $scope.currentPage = 1; // 2 - $watch triggers twice
    $scope.numPerPage = 2;
    $scope.maxSize = 5;

    array = $.map(array, function(value, index) {
        return [value];
    });
    $scope.array = array;
    $scope.filteredArray = [];

    $scope.order = function(field) {
      $scope.reverse = ($scope.field === field) ? !$scope.reverse : false;
      $scope.field = field;
    };
    $scope.field = 'id';
    $scope.reverse = false;

    $scope.$watch('currentPage + numPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;
        alert(begin + " " + end);
        $scope.filteredArray = $scope.array.slice(begin, end);
    });
}]);

问题是我不知道角度如何计算页数。在这个配置中，我只得到 1 页，我无法获得 4 页的正确值。

另外，当我手动将 currentPage 设置为 2 或更多时，$watch 会触发两次。第一次使用正确的开始/结束值，第二次使用之前的值，所以它不会分页。

我该如何解决这个问题？

编辑：

var exampleApp = angular.module('exampleApp', ['ui.bootstrap']).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

exampleApp.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
    $scope.currentPage = 1;
    $scope.numPerPage = 2;
    $scope.maxSize = 5;

    array = $.map(array, function(value, index) {
        return [value];
    });
    $scope.array = array;
    $scope.filteredCreations = [];

    $scope.order = function(field) {
      $scope.reverse = ($scope.field === field) ? !$scope.reverse : false;
      $scope.field = field;
    };
    $scope.field = 'id';
    $scope.reverse = false;

    $scope.$watch('currentPage + numPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;

        $scope.filteredArray = $scope.array.slice(begin, end);
    });
}]);

局部视图：

<div ng-controller="CreationController">
<div class="row" style="text-align: right; margin: 0; padding: 0;">
        <pagination 
            ng-model="currentPage"
            total-items="array.length"
            max-size="maxSize"
            boundary-links="true">
        </pagination>
    </div>
<div class="foobar accordion" ng-repeat="arr in filteredArray | orderBy : field : reverse">
[[arr.id]]
[[arr.name]]
</div>

Answer 1

<div class="foobar accordion" ng-repeat="arr in filteredArray | orderBy : field : reverse|itemsPerPage:7">

尝试在您的 ng-repeat 集合中添加 itemsPerPage:7。