Angular-ui/bootstrap: pagination not rendered (missing styles?)
angular-ui, angular-ui-bootstrap, angularjs
Solution
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:
- Switch to old boostrap
- Write it yourself
- Use the `<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!
Problem
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> ```