垂直滾動在角度視圖中不可見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中注意到的幾個問題是你從bootstrap使用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

回答

相關問題