角度表示のng-repeatで垂直スクロールが表示されない

バックエンドから顧客リストを取得しています。私はそれからng-repeatに移りたい。より多くの顧客がいる場合は、垂直スクロールが表示されるはずですが、表示されません。なぜ表示されないのですか？角度表示のng-repeatで垂直スクロールが表示されない

<link rel="stylesheet" href="hike.css"> 
<div ng-show='isLoading' class="row"> 
    <div class="col-mg-12 hike-container"> 
     <div class="panel-body"> 
     <div class="table-responsive"> 
      <table class="hike table table-hover tab-panel tab-content"> 
      <thead> 
       <tr> 
       <th> 
        <span>Customer Id</span> 
       </th> 
       <th> 
        <span>Email</span> 
       </th>    
      </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="customer in customers" ng-class-odd="'odd'" ng-class-even="'even'"> 
        <td>{{customer.id}}</td> 

        <td>{{customer.email}}</td> 
        </td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </div> 
    </div> 
</div>

hike.css

div.lhike-container .lhike{ 
    background-color: white; 
    padding: 0px 0px; 
    border-style: solid; 
    border-width: 1px 1px 1px 1px; 
    border-color: #dde6e9; 
} 
th { 
    background: rgba(102, 123, 147, 0.14); 
    text-align: center; 
} 
tbody > tr.odd{ 
    background: #FAFBFC; 
} 
tbody > tr > td { 
    text-align: center; 
    height: 52px; 
    vertical-align: middle; 
}

コントローラ

(function(){ 
    'use strict'; 
    angular 
    .module('app') 
    .controller('CustController', CustController); 
    CustController.$inject = ['$scope', 'customerService']; 
    function CustController($scope, customerService,){ 


     $scope.isLoading = false; 

     customerService.getCustomers.then(function(response){ 
     if(response.data.error === 0){ 
      if(response.data.result.customers){ 
      $scope.customers = response.data.result.customers; 
      } 
     } 
     $scope.isLoading = true; 
     }); 
    } 
})();

出典

2016-07-25 Guest

コントローラコードも追加できますか？ – Srijith

@Srijithコントローラを追加してください... – Guest

このスニペットをチェックしてください。私はあなたのCustomerServiceを模倣しなければならなかったが、スクロールがうまく動作する。私はこれをテストするためにChromeを使用しています。あなたのhtmlで気づいた問題のカップルは、あなたがブートストラップからcol-mg-12を使用しているということですか？これはcol-md-12である必要があります。

(function() { 
 
    'use strict'; 
 
    angular 
 
    .module('app', []) 
 
    .controller('CustController', CustController); 
 
    CustController.$inject = ['$scope']; 
 

 
    function CustController($scope) { 
 
    $scope.isLoading = false; 
 
    $scope.customers = [{ 
 
     id: '1', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '2', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '3', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '4', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '5', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '2', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '3', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '4', 
 
     email: '[email protected]' 
 
    }, { 
 
     id: '5', 
 
     email: '[email protected]' 
 
    }] 
 
    } 
 
})();

div.lhike-container .lhike { 
 
    background-color: white; 
 
    padding: 0px 0px; 
 
    border-style: solid; 
 
    border-width: 1px 1px 1px 1px; 
 
    border-color: #dde6e9; 
 
} 
 
th { 
 
    background: rgba(102, 123, 147, 0.14); 
 
    text-align: center; 
 
} 
 
tbody > tr.odd { 
 
    background: #FAFBFC; 
 
} 
 
tbody > tr > td { 
 
    text-align: center; 
 
    height: 52px; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div class="row" ng-controller="CustController"> 
 
     {{isLoading}} 
 
    <div class="col-mg-12 hike-container"> 
 
     <div class="panel-body"> 
 
     <div class="table-responsive"> 
 
      <table class="hike table table-hover tab-panel tab-content"> 
 
      <thead> 
 
       <tr> 
 
       <th> 
 
        <span>Customer Id</span> 
 
       </th> 
 
       <th> 
 
        <span>Email</span> 
 
       </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr ng-repeat="customer in customers" ng-class-odd="'odd'" ng-class-even="'even'"> 
 
       <td>{{customer.id}}</td> 
 

 
       <td>{{customer.email}}</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-07-25 09:12:34 Srijith

表をスクロールする必要がある場合は、単に親のdivのための固定または最大の高さを提供しています。

<style> 
    .table-responsive {  
     max-height: 400px; 
     overflow-y: auto; 
    } 
</style>

出典

2016-07-25 09:12:42 Alex

角度表示のng-repeatで垂直スクロールが表示されない

答えて

関連する問題