Menu
I'm new to angular-ui and playing with it. I'm trying to use the pagination directive (http://angular-ui.github.io/bootstrap/#/pagination), but it seems I'm missing some styles as I just see the unordered list rendered, rather than the expected pager UI. I included the following resources, in this order:
1) the latest (RC) bootstrap CSS: http://blog.netdna.com/opensource/bootstrapcdn/bootstrapcdn-now-serving-3-0-0-rc1/
2) angular JS: http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js
3) angular-ui/bootstrap: I include from https://github.com/angular-ui/bootstrap/tree/gh-pages the file ui-bootstrap-tpls-0.4.0.js
My HTML sample body:
<body ng-app="Test">
<div ng-controller="PaginationDemoCtrl" class="well well-small">
<pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="'‹'" next-text="'›'" first-text="'«'" last-text="'»'"></pagination>
</div>
<script>
var PaginationDemoCtrl = function ($scope) {
$scope.noOfPages = 7;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
};
var app = angular.module("Test", ["ui.bootstrap"]);
</script>
</body>
213
I was able to fix styling by following quick source code change:
in your ui-bootstrap file (mine was named ui-bootstrap-tpls-0.6.0.min.js) find following text:
<div class="pagination"><ul>
and then add class="pagination" to <ul> so it looks like this
<div class="pagination"><ul class="pagination">
I had an issue with pagination when I updated my angular-bootstrap version. It seems that they have changed the way we should use the directive.
before
<uib-pagination
total-items="pagination.total_entries"
ng-model="pagination.current_page"
ng-change="pageChanged()">
</uib-pagination>
after
<ul uib-pagination
total-items="pagination.total_entries"
ng-model="pagination.current_page"
ng-change="pageChanged()">
</ul>
It's not your fault. Turns out angular UI is not 100% compatible with bootstrap 3 just yet. Most things work, but you can see the status in this issue: Support bootstrap 3.0. I don't have the time to dive into this particular issue right now, but since all the styles are missing rather than some slightly broken thing, and all the functionality is fine, I bet it's an easy fix (renaming a class, etc). Meanwhile, you should either:
<pager> with new boostrap - I just tested it, and it works fine. So instead of <pagination> you want <pager>. A few fewer buttons but works for my purposes.For instance:
<pager num-pages="numPages()" current-page="currentPage"></pager>
Hope that helps!
27
I have the same issue and I changed the template to address the changes in Bootstrap 3:
angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/pagination/pagination.html",
"<ul class=\"pagination\">\n" +
" <li ng-repeat=\"page in pages\" ng-class=\"{active: page.active, disabled: page.disabled}\"><a ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" +
"</ul>\n" +
"");
}]);
Just add the above wherever you created your modules.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
