如下面的代码所示,分页(来自 Bootstrap 库的 Angular Directives)控件的存在会在初始加载时将模型的值更改为 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>
谢谢
最佳答案
我认为问题是您没有指定总页数。尝试将 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);
});
}
关于javascript - 分页控件将其绑定(bind)的模型值更改为 1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24455211/