我是angular-ui的新手并且正在玩它。我正在尝试使用分页指令（http://angular-ui.github.io/bootstrap/#/pagination），但似乎我缺少一些样式，因为我只看到呈现的无序列表，而不是预期的寻呼机UI。我按以下顺序包含了以下资源：
1）最新的（RC） bootstrap CSS ：http://blog.netdna.com/opensource/bootstrapcdn/bootstrapcdn-now-serving-3-0-0-rc1/
2）棱角JS ：http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js
3） angular-ui / bootstrap ：我从https://github.com/angular-ui/bootstrap/tree/gh-pages包含文件ui-bootstrap-tpls-0.4.0.js
我的HTML示例正文：
<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>
答案 0 :(得分：8)
我能够通过快速更改源代码来修复样式：
你的ui-bootstrap文件中的（我的名字是ui-bootstrap-tpls-0.6.0.min.js）找到以下文字：
<div class="pagination"><ul>
然后将class="pagination"添加到<ul>，使其看起来像这样
<div class="pagination"><ul class="pagination">
答案 1 :(得分：7)
当我更新我的angular-bootstrap版本时，我遇到了分页问题。他们似乎已经改变了我们应该使用该指令的方式。
之前
<uib-pagination total-items="pagination.total_entries" ng-model="pagination.current_page" ng-change="pageChanged()"></uib-pagination>
之后
<ul uib-pagination total-items="pagination.total_entries" ng-model="pagination.current_page" ng-change="pageChanged()"></ul>
答案 2 :(得分：4)
这不是你的错。事实证明，角度UI与bootstrap 3并非100％兼容。大多数事情都有效，但您可以在此问题中看到状态：Support bootstrap 3.0。我现在没有时间深入研究这个特定问题，但由于所有样式都缺失而不是一些稍微破碎的东西，并且所有功能都很好，我敢打赌这是一个简单的修复（重命名一个类等）。同时，您应该：
<pager>与新的boostrap一起使用 - 我刚试过它，它运行正常。因此，您需要<pagination>而不是<pager>。<pager num-pages="numPages()" current-page="currentPage"></pager>
。少了一些按钮但是可以用于我的目的。例如：
{{1}}
希望有所帮助！
答案 3 :(得分：2)
我有同样的问题，我更改了模板以解决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" +
"");
}]);
只需在创建模块的地方添加上述内容。
答案 4 :(得分：1)
我遇到了同样的情况，但上述情况都没有对我有所帮助。主要问题是：
js要求 ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates)。如果您只包含ui-bootstrap.min.js，则还需要提供自己的html模板。
所以不要同时使用它们，ui-bootstrap-tpls.min.js就足够了。
答案 5 :(得分：0)
我使用此版本的angular@~1.4.8和angular-bootstrap@~0.14.3
答案 6 :(得分：0)
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees=employees;
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function () {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))" ng-style="set_color(emp)">
<td>{{emp.Name}} </td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</body>
答案 7 :(得分：0)
模板：
<pagination total-items="totalCount"
ng-model="currentPage"
items-per-page="limit"
max-size="maxSize"
rotate="false"
class="pagination-sm pull-right"
next-text="›"
previous-text="‹"
first-text="«"
last-text="»"
boundary-links="true"
ng-change="user_list()">
</pagination>
和javascript：
$scope.currentPage = 1;
$scope.limit = 100;
$scope.maxSize = 12;
答案 8 :(得分：0)
我使用Bootstrap v4.0.0-beta.3遇到了这个问题 和angular-ui-bootstrap 2.5.0
我通过将ui-bootstrap-tpls.js pagination.html模板更改为以下内容来修复它
angular.module("uib/template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("uib/template/pagination/pagination.html",
"<li role=\"menuitem\" ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"page-item pagination-first\"><a href ng-click=\"selectPage(1, $event)\" ng-disabled=\"noPrevious()||ngDisabled\" class='page-link' uib-tabindex-toggle>{{::getText('first')}}</a></li>\n" +
"<li role=\"menuitem\" ng-if=\"::directionLinks\" ng-class=\"{disabled: noPrevious()||ngDisabled}\" class=\"page-item pagination-prev\"><a href ng-click=\"selectPage(page - 1, $event)\" ng-disabled=\"noPrevious()||ngDisabled\" class='page-link' uib-tabindex-toggle>{{::getText('previous')}}</a></li>\n" +
"<li role=\"menuitem\" ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active,disabled: ngDisabled&&!page.active}\" class=\"page-item pagination-page\"><a href ng-click=\"selectPage(page.number, $event)\" class='page-link' ng-disabled=\"ngDisabled&&!page.active\" uib-tabindex-toggle>{{page.text}}</a></li>\n" +
"<li role=\"menuitem\" ng-if=\"::directionLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"page-item pagination-next\"><a href ng-click=\"selectPage(page + 1, $event)\" class='page-link' ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('next')}}</a></li>\n" +
"<li role=\"menuitem\" ng-if=\"::boundaryLinks\" ng-class=\"{disabled: noNext()||ngDisabled}\" class=\"page-item pagination-last\"><a href ng-click=\"selectPage(totalPages, $event)\" class='page-link' ng-disabled=\"noNext()||ngDisabled\" uib-tabindex-toggle>{{::getText('last')}}</a></li>\n" +
"");
}]);