Question

如下面的代码所示，分页的存在（来自Angst Directives for Bootstrap库）控件在初始加载时将模型的值更改为1，有什么方法可以解决这个问题吗？我添加了一个Plunker here。

<!DOCTYPE html>
<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="testApp" ng-controller="testCtrl">
    <pagination ng-model="currentPage"></pagination>    
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>

<script>
var testApp = angular.module('testApp', ['ui.bootstrap']);

var testCtrl = function($scope) {
    $scope.currentPage = 4;

    $scope.$watch('currentPage', function(){
        alert($scope.currentPage);
    });
}

testCtrl.$inject = ['$scope'];
testApp.controller('testCtrl', testCtrl);
</script>

</html>

由于

Answer 1

我认为问题在于您没有指定总页数。尝试将total-items="totalItems"添加到您的指令中，该指令默认为每页10个项目。如果您只有10个项目，则只显示1.您还需要设置每页的项目数。

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

var testCtrl = function($scope) {
   $scope.currentPage = 4;
   $scope.totalItems = 10;
   $scope.itemPerPage =1;

   $scope.$watch('currentPage', function(){
    alert($scope.currentPage);
   });
 }

以下是演示：http://plnkr.co/edit/mZsBhzpA5lax883C5ihy?p=preview

Answer 2

您需要为指令分页设置 total-items 属性：

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

然后，您需要在控制器的范围内设置相应的属性：

$scope.currentPage = 4;
$scope.totalItems = 10; // For example.
$scope.itemsPerPage = 2;

您可以在文档for the pagination directive

上找到所有详细信息

分页控制将模型的值更改为1

2 个答案: