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 に答える
5

これはあなたの責任ではないです。angular UI は、まだ Bootstrap 3 と 100% 互換性がないことがわかりました。ほとんどのものは機能しますが、この問題でステータスを確認できます: Support bootstrap 3.0。現在、この特定の問題に飛び込む時間はありませんが、わずかに壊れたものではなくすべてのスタイルが欠落しており、すべての機能に問題がないため、簡単に修正できると思います (クラスの名前を変更するなど)。 . それまでの間、次のいずれかを行う必要があります。

  1. 古いブーストラップに切り替える
  2. 自分で書く
  3. 新しいブーストラップを使用してください<pager>- テストしたところ、正常に動作します。<pagination>だからあなたが欲しい代わりに<pager>。ボタン数は少ないですが、私の目的には合っています。

例えば： 

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

それが役立つことを願っています!

于 2013-08-01T21:26:18.183 に答える
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 に答える