twitter-bootstrap angular js ui.bootstrap 中的分页对我不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27226868/
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
pagination in angular js ui.bootstrap doesnt work for me
提问by m hadadi
I add ui-bootstrap-tpls-0.12.0.jsto my project and us accordion and now I wanna use pagination but i get this error
我添加ui-bootstrap-tpls-0.12.0.js到我的项目和我们手风琴，现在我想使用分页，但我收到这个错误
ngModelCtrl.$render is not a function
here is my code
这是我的代码
<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>
</div>
i add ui.bootstrap
我添加了 ui.bootstrap
angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);
and in my script tag i have
在我的脚本标签中，我有
<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>
accordion works fine but pagination doesnt work
手风琴工作正常，但分页不起作用
回答by zewa666
Take a closer look at the documentation for the pagination control. http://angular-ui.github.io/bootstrap/#/pagination
仔细查看分页控件的文档。 http://angular-ui.github.io/bootstrap/#/pagination
I guess you're at least missing the ng-model attribute, otherwise your pagination doesn't know where to look for the current value. Guess thats what you meant with current-page.
我想您至少缺少 ng-model 属性，否则您的分页不知道在哪里查找当前值。猜猜这就是您对当前页面的意思。
回答by Shohel
Use version 10, Here is the sample of pagination
使用版本 10，这里是分页示例
HTML
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in friends">
{{friend.name}}
</div>
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<p>
total Items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
</body>
</html>
JS
JS
// Code goes here
angular.module('plunker', ['ui.bootstrap'])
.controller('contentCtrl', function ($scope) {
$scope.friends = [
{'name':'Hyman'},
{'name':'Tim'},
{'name':'Stuart'},
{'name':'Richard'},
{'name':'Tom'},
{'name':'Frank'},
{'name':'Ted'},
{'name':'Michael'},
{'name':'Albert'},
{'name':'Tobby'},
{'name':'Mick'},
{'name':'Nicholas'},
{'name':'Jesse'},
{'name':'Lex'},
{'name':'Robbie'},
{'name':'Jake'},
{'name':'Levi'},
{'name':'Edward'},
{'name':'Neil'},
{'name':'Hugh'},
{'name':'Hugo'},
{'name':'Yanick'},
{'name':'Matt'},
{'name':'Andrew'},
{'name':'Charles'},
{'name':'Oliver'},
{'name':'Robin'},
{'name':'Harry'},
{'name':'James'},
{'name':'Kelvin'},
{'name':'David'},
{'name':'Paul'}
];
$scope.totalItems = 64;
$scope.itemsPerPage = 10
$scope.currentPage = 1;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});
