我正在从后端获取客户列表。我想从中填充到 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>
远足.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;
}
Controller
(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;
});
}
})();
最佳答案
检查这个片段。我不得不 mock 你的 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: '1@1.com'
}, {
id: '2',
email: '2@1.com'
}, {
id: '3',
email: '3@1.com'
}, {
id: '4',
email: '4@1.com'
}, {
id: '5',
email: '5@1.com'
}, {
id: '2',
email: '2@1.com'
}, {
id: '3',
email: '3@1.com'
}, {
id: '4',
email: '4@1.com'
}, {
id: '5',
email: '5@1.com'
}]
}
})();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>关于javascript - 在 Angular View 中，ng-repeat 的垂直滚动不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38563212/