twitter-bootstrap Angular UI Bootstrap Pagination ng-model 未更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34775157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI Bootstrap Pagination ng-model not updating
提问by Tom O'Brien
I am trying to use a UI Bootstrap Pagination directive in my project, but for some strange reason the ng-model used for updating the current page is not working. The pagination is showing up correctly with the correct number of tabs and everything, but when I click on a different number, the ng-model variable is not getting updated. For the life of me, I can't figure out why not.
我试图在我的项目中使用 UI Bootstrap Pagination 指令，但由于某些奇怪的原因，用于更新当前页面的 ng-model 无法正常工作。分页正确显示了正确数量的选项卡和所有内容，但是当我单击不同的数字时，ng-model 变量没有更新。对于我的生活，我不知道为什么不。
The code I am using is taken from the examples on the UI Bootstrap homepage:
我使用的代码取自 UI Bootstrap 主页上的示例：
<uib-pagination total-items="totalItems" ng-model="currentPage"
ng-change="pageChanged()"></uib-pagination>
The controller looks like this:
控制器看起来像这样：
$scope.currentPage = 1;
$scope.totalItems = 160;
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
Here are the different required sources I am including:
以下是我包括的不同的必需来源：
<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>
The strangest thing is I have created a plnkr which replicates my code and it works! You can see here: http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6
最奇怪的是我创建了一个 plnkr 来复制我的代码并且它可以工作！你可以在这里看到：http: //plnkr.co/edit/4DoKnRACbKjLnMH5vGB6
Can anybody think of any ideas that might be causing this not to work? I'm scratching my head here, and can't think of anything obvious I am doing wrong...
任何人都可以想出可能导致这不起作用的任何想法吗？我在这里挠头，想不出有什么明显的我做错了......
All help much apprecatiated!
非常感谢所有帮助！
回答by Viktor
I ran through the same problem and solved it by wrapping all Angular UI Bootstrap Pagination parameters into the object, like so:
我遇到了同样的问题，并通过将所有 Angular UI Bootstrap Pagination 参数包装到对象中来解决它，如下所示：
JS
JS
$scope.pagination = {
currentPage: 1,
maxSize: 21,
totalItems: data.count
};
HTML
HTML
<uib-pagination
total-items="pagination.totalItems"
ng-model="pagination.currentPage"
max-size="pagination.maxSize"
boundary-link-numbers="true"
ng-change="pageChanged()"></uib-pagination>
回答by Barani r
I also had same issue. Found that the bootstrap-tpls-0.10.0.js was causing this issue. Just replaced it with bootstrap-tpls-0.11.0.js to make it work.
我也有同样的问题。发现 bootstrap-tpls-0.10.0.js 导致了这个问题。只需将其替换为 bootstrap-tpls-0.11.0.js 即可使其工作。
Below is the library combination that works:
以下是有效的库组合：
<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>
