6

我是 angular-ui 的新手并正在使用它。我正在尝试使用分页指令（http://angular-ui.github.io/bootstrap/#/pagination），但似乎我缺少一些样式，因为我只看到呈现的无序列表，而不是预期的寻呼机 UI。我按以下顺序包含了以下资源：

1）最新（RC）引导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="'&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>
4

9 回答 9

8

我能够通过以下快速源代码更改来修复样式：

在您的 ui-bootstrap 文件（我的名为 ui-bootstrap-tpls-0.6.0.min.js）中找到以下文本：

<div class="pagination"><ul>

然后添加class="pagination"到<ul>它看起来像这样

<div class="pagination"><ul class="pagination">
于 2013-10-17T14:44:44.540 回答
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>
于 2017-01-24T07:09:19.883 回答
5

这不是你的错。原来 angular UI 还不是 100% 与 bootstrap 3 兼容。大多数事情都有效，但您可以在此问题中看到状态：支持 bootstrap 3.0。我现在没有时间深入研究这个特定问题，但是由于缺少所有样式而不是一些稍微损坏的东西，并且所有功能都很好，我敢打赌这是一个简单的修复（重命名一个类等） . 同时，您应该：

  1. 切换到旧的 bo​​ostrap
  2. 自己写
  3. 使用<pager>新的 boostrap - 我刚刚测试过它，它工作正常。所以不是<pagination>你想要的<pager>。少了几个按钮，但适用于我的目的。

例如： 

<pager num-pages="numPages()" current-page="currentPage"></pager>

希望有帮助！

于 2013-08-01T21:26:18.183 回答
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" +
    "");
}]);

只需在您创建模块的任何位置添加上述内容。

于 2013-09-20T21:08:54.390 回答
1

我遇到了同样的情况，但以上都对我没有帮助。主要问题是：

ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates)js需要的。如果只包含ui-bootstrap.min.js，则还需要提供自己的 html 模板。

所以不要同时使用它们，ui-bootstrap-tpls.min.js就足够了。

于 2014-05-26T08:27:58.113 回答
1

我使用 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" + ""); }]);

于 2018-03-16T14:12:32.783 回答
0

我通过使用这个版本来解决这个angular@~1.4.8问题angular-bootstrap@~0.14.3

于 2016-02-12T14:01:04.613 回答
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>

于 2018-03-16T04:29:28.443 回答
0

模板：

<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>

和javascript：

$scope.currentPage = 1;
$scope.limit = 100;
$scope.maxSize = 12;
于 2018-03-16T04:41:08.753 回答