gpt4 book ai didi

javascript - 在 Angular View 中,ng-repeat 的垂直滚动不可见

转载 作者:行者123 更新时间:2023-11-28 05:30:03 26 4
gpt4 key购买 nike

我正在从后端获取客户列表。我想从中填充到 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com