Naf*_*tis 6 angularjs angular-ui angular-ui-bootstrap
我是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)angular 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>
我能够通过快速更改源代码来修复样式:
在你的ui-bootstrap文件中(我的名字是ui-bootstrap-tpls-0.6.0.min.js)找到以下文字:
<div class="pagination"><ul>
然后添加class="pagination"到<ul>所以它看起来像这样
<div class="pagination"><ul class="pagination">
当我更新我的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>
这不是你的错。事实证明，角度UI尚不与Bootstrap 3 100％兼容。大多数事情都可以运行，但是您可以在此问题中看到状态：支持bootstrap 3.0。我现在没有时间去研究这个特定的问题，但是由于缺少了所有样式，而不是有些破烂的东西，并且所有功能都很好，所以我敢打赌，这很容易解决（为类重命名等） 。同时，您应该：
<pager>与新的boostrap一起使用-我刚刚对其进行了测试，并且效果很好。所以不是<pagination>你想要的<pager>。少了几个按钮，但可以满足我的目的。例如：
<pager num-pages="numPages()" current-page="currentPage"></pager>
希望有帮助！
| 归档时间： |
|
| 查看次数： |
15381 次 |
| 最近记录： |