角度

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 。