我正在尝试在我的项目中使用UI Bootstrap Pagination指令,但由于某些奇怪的原因,用于更新当前页面的ng模型不起作用。使用正确数量的选项卡和所有内容正确显示分页,但是当我单击其他数字时,ng-model变量不会更新。对于我的生活,我无法弄清楚为什么不这样做。
我使用的代码取自UI Bootstrap主页上的示例:
<uib-pagination total-items="totalItems" ng-model="currentPage"
ng-change="pageChanged()"></uib-pagination>
控制器如下所示:
$scope.currentPage = 1;
$scope.totalItems = 160;
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
以下是我所需的不同来源:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
最奇怪的是我创建了一个plnkr,它复制了我的代码并且它有效!你可以在这里看到:http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6
任何人都可以想到任何可能导致这种情况失效的想法吗?我在这里摸不着头脑,想不出任何明显的我做错了......
所有帮助都很有用!
答案 0 :(得分:24)
我遇到了同样的问题并通过将所有Angular UI Bootstrap Pagination参数包装到对象中来解决它,如下所示:
$scope.pagination = {
currentPage: 1,
maxSize: 21,
totalItems: data.count
};
<uib-pagination
total-items="pagination.totalItems"
ng-model="pagination.currentPage"
max-size="pagination.maxSize"
boundary-link-numbers="true"
ng-change="pageChanged()"></uib-pagination>
答案 1 :(得分:0)
我也有同样的问题。发现bootstrap-tpls-0.10.0.js导致了这个问题。只需将其替换为bootstrap-tpls-0.11.0.js即可使其正常工作。
以下是适用的图书馆组合:
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>