Angularjs 角度ui/引导：未呈现分页（缺少样式？）_Angularjs_Angular Ui Bootstrap_Angular Ui

Angularjs 角度ui/引导：未呈现分页（缺少样式？）

angularjs

Angularjs 角度ui/引导：未呈现分页（缺少样式？）,angularjs,angular-ui-bootstrap,angular-ui,Angularjs,Angular Ui Bootstrap,Angular Ui,我对angular ui不熟悉，也不喜欢玩它。我试图使用pagination指令（），但似乎缺少了一些样式，因为我只看到呈现的无序列表，而不是预期的分页器UI。我按此顺序包括以下资源： 1）最新的（RC）引导CSS： 2）角度JS： 3）角度ui/bootstrap：我从文件ui-bootstrap-tpls-0.4.0.js中包括我的HTML示例正文： <body ng-app="Test"> <div ng-controller="PaginationDemoCtr

我对angular ui不熟悉，也不喜欢玩它。我试图使用pagination指令（），但似乎缺少了一些样式，因为我只看到呈现的无序列表，而不是预期的分页器UI。我按此顺序包括以下资源：

1）最新的（RC）引导CSS：

2） 角度JS：

3） 角度ui/bootstrap：我从文件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="'&lsaquo;'" next-text="'&rsaquo;'" first-text="'&laquo;'" last-text="'&raquo;'"></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>


var PaginationDemoCtrl=函数（$scope）{
$scope.noOfPages=7；
$scope.currentPage=4；
$scope.maxSize=5；
$scope.setPage=函数（页码）{
$scope.currentPage=pageNo；
};
};
var app=angular.module（“Test”[“ui.bootstrap”]）；
这不是你的错。事实证明，angular UI还不能100%兼容Bootstrap3。大多数情况下都能正常工作，但您可以在此问题中看到状态：。我现在没有时间深入讨论这个问题，但是由于缺少了所有的样式，而不是一些轻微损坏的东西，而且所有的功能都很好，我打赌这是一个很容易的修复（重命名类等）。同时，你应该：
切换到旧的助推器
你自己写吧
将
与新的boostrap一起使用-我刚刚测试了它，它工作正常。因此，您需要的不是
，而是
。少了几个按钮，但符合我的目的
例如：
<pager num-pages="numPages()" current-page="currentPage"></pager>



希望有帮助
 我也有同样的问题，我更改了模板以解决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" +
    "");
}]);

angular.module（“template/pagination/pagination.html”，[]）。运行（[“$templateCache”），函数（$templateCache）{
$templateCache.put（“template/pagination/pagination.html”，
“\n”+
“{{page.text}\n”+
“\n”+
"");
}]);

只要在创建模块的任何地方添加上述内容即可。
我可以通过以下快速源代码更改来修复样式：
在您的ui引导文件（我的文件名为ui-bootstrap-tpls-0.6.0.min.js）中，找到以下文本：
<div class="pagination"><ul>

我也遇到过同样的情况，但以上这些对我都没有帮助。主要问题是：
ui-bootstrap-tpls.min.js==（ui-bootstrap.min.js+html模板）
js所需。如果只包含ui bootstrap.min.js
，还需要提供自己的html模板
所以不要同时使用它们，ui bootstrap tpls.min.js
就足够了
 我通过使用此版本的angular@~1.4.8
和angular bootstrap@~0.14.3
解决了这个问题，当我更新我的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>




var myApp=angular.module（'myApp'，['ui.bootstrap']））
.controller（'employeeController'，函数（$scope）{
var雇员=[{
“姓名”：“阿尔弗雷德·富特基斯特”，
“城市”：“柏林”，
“国家”：“德国”
}, {
“姓名”：“Berglunds snabbköp”，
“城市”：“卢勒”，
“国家”：“瑞典”
}, {
“名称”：“布劳尔见德利卡塔森”，
“城市”：“曼海姆”，
“国家”：“德国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“名称”：“Bólido Comidas preparadas”，
“城市”：“马德里”，
“国家”：“西班牙”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“名称”：“Bon应用程序”，
“城市”：“马赛”，
“国家”：“法国”
}, {
“名称”：“最低美元市场”，
“城市”：“Tsawassen”，
“国家”：“加拿大”
}, {
“名称”：“仙人掌”，
“城市”：“布宜诺斯艾利斯”，
“国家”：“阿根廷”
}, {
“名称”：“商业中心Moctezuma”，
“城市”：“墨西哥联邦”，
“国家”：“墨西哥”
}, {
“姓名”：“剁炒杂烩”，
“城市”：“伯尔尼”，
“国家”：“瑞士”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“布隆德尔·佩雷和菲尔斯”，
“城市”：“斯特拉斯堡”，
“国家”：“法国”
}, {
“姓名”：“Comércio Mineiro”，
“城市”：“圣保罗”，
“国家”：“巴西”
}];
$scope.employees=员工；
$scope.pageSize=10；
$scope.currentPage=1；
$scope.itemsPerPage=$scope.pageSize；
$scope.maxSize=5；//要显示的寻呼机按钮数
$scope.totalItems=$scope.employees.length；
$scope.setPage=函数（页码）{
$scope.currentPage=pageNo；
};
$scope.pageChanged=函数（）{
log（'页面更改为：'+$scope.currentPage）；
};
$scope.setItemsPerPage=函数（num）{
$scope.itemsPerPage=num；
$scope.currentPage=1；//重置为第一页
}
})

<ul uib-pagination
    total-items="pagination.total_entries"
    ng-model="pagination.current_page"
    ng-change="pageChanged()">
</ul>

<pagination total-items="totalCount"
            ng-model="currentPage"
            items-per-page="limit"
            max-size="maxSize"
            rotate="false"
            class="pagination-sm pull-right"
            next-text="&rsaquo;"
            previous-text="&lsaquo;"
            first-text="&laquo;"
            last-text="&raquo;"
            boundary-links="true"
            ng-change="user_list()">
</pagination>

$scope.currentPage = 1;
$scope.limit = 100;
$scope.maxSize = 12;