javascript - 分页控件将其绑定(bind)的模型值更改为 1

标签 javascript angularjs twitter-bootstrap pagination

如下面的代码所示,分页(来自 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);
   });
 }

这是一个演示:http://plnkr.co/edit/mZsBhzpA5lax883C5ihy?p=preview

关于javascript - 分页控件将其绑定(bind)的模型值更改为 1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24455211/

相关文章:

Javascript - 在输入中添加小数点

html - Bootstrap Modal - 在不关闭模态的情况下使背景可点击

javascript - CasperJS中的waitTimeout和stepTimeout有什么区别?

javascript - WKScriptMessageHandler 不会在网页上的按钮元素上监听 'onclick' 或 'click' 事件。网页使用Reactjs开发

javascript - ng-include 和 ng-repeat - 删除子项

javascript - 将 HTML5 全屏 (MAP) 移动到第二个屏幕

html - 如何使用 AngularJS 在 Popover 中显示和隐藏 <div>

javascript - HTML Bootstrap 边框/面板

jquery - 如何在 Bootstrap 4 中为 nav-link 元素设置不同的对齐方式?

javascript - AngularJS 到 Rails MassAssignmentSecurity::Error