2016-08-12 6 views
0

私はangularjsで新しくなりました。私はhttps://angular-ui.github.io/bootstrap/#/paginationを使用しています。私はいくつかの問題があります。スタイルクラス= "改ページ改ページ-LG" 働いていない、私が使用していますブートストラップバージョン4.ヘルプme.Thanksをhttps://angular-ui.github.io/bootstrap/#/pagination class = "ページ区切り-lg"はブートストラップでは機能しません4

error image here

index.htmlを

<div> 
     <pre>You are currently on page {{userCtrl.page}}</pre> 
     <ul uib-pagination total-items="userCtrl.totalElements" ng-model="userCtrl.page" max-size="10000" class="pagination pagination-lg" 
      boundary-links="true" num-pages="userCtrl.totalPages"> 
     </ul> 
    </div> 

userController.js

module.exports = function (UserService) { 
    var _this = this; 
    _this.users = []; 
    _this.page = []; 
    _this.size = []; 
    _this.totalElements = []; 
    _this.totalPages = []; 

    _this.list = function() { 
     UserService.getUsersPage().then(function (response) { 
      console.log(response); 
      _this.users = response.content; 
      _this.page = response.number; 
      _this.size = response.numberOfElements; 
      _this.totalElements = response.totalElements; 
      _this.totalPages = response.totalPages; 
     }) 
    }; 
    _this.list(); 
}; 

答えて

0

ページ設定コンポーネントDOMを確認しましたか?構造?私はあなたが欠落しているCSSクラスを参照してくださいと確信している

<nav aria-label="Page navigation"> 
    <ul class="pagination"> 
    <li class="page-item"> 
     <a class="page-link" href="#" aria-label="Previous"> 
     <span aria-hidden="true">&laquo;</span> 
     <span class="sr-only">Previous</span> 
     </a> 
    </li> 
    <li class="page-item"><a class="page-link" href="#">1</a></li> 
    <li class="page-item"><a class="page-link" href="#">2</a></li> 
    <li class="page-item"><a class="page-link" href="#">3</a></li> 
    <li class="page-item"><a class="page-link" href="#">4</a></li> 
    <li class="page-item"><a class="page-link" href="#">5</a></li> 
    <li class="page-item"> 
     <a class="page-link" href="#" aria-label="Next"> 
     <span aria-hidden="true">&raquo;</span> 
     <span class="sr-only">Next</span> 
     </a> 
    </li> 
    </ul> 
</nav> 

V3:

<nav aria-label="Page navigation"> 
    <ul class="pagination"> 
    <li> 
     <a href="#" aria-label="Previous"> 
     <span aria-hidden="true">&laquo;</span> 
     </a> 
    </li> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
    <li> 
     <a href="#" aria-label="Next"> 
     <span aria-hidden="true">&raquo;</span> 
     </a> 
    </li> 
    </ul> 
</nav> 

V4 uiBootstrapはそう両方のバージョンを比較し、バージョン3.3.6でテストされてv3の要素;)

関連する問題