gpt4 book ai didi

javascript - 如何根据 'ng-style' 计数分配 'ng-repeat' 指令值

转载 作者:可可西里 更新时间:2023-11-01 13:00:05 25 4
gpt4 key购买 nike

我有一个 Angularjs 示例 snippet .这里使用 ng-repeat 指令在表中显示名称,我计划添加 ng-style 指令以根据表行数将垂直滚动条添加到表中。我怎样才能使下面的代码工作?

例如:只有当表格行数超过 4 时,我们才需要垂直滚动条到表格我试过这样

<div ng-if= "names.length > 4" ng-style="{'overflow-y': 'auto'}" >
<table>
---------
</table>
</div>

请帮忙修改代码

这里是示例代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>

</body>
</html>

最佳答案

使用ngStyle .最好将 (ng-) 样式应用于包含表格的元素。设置一个高度属性(例如100px)。然后 overflow-y 样式将导致超出该阈值的任何内容被添加到滚动区域中。

<div ng-style="containerStyle">
<table>
<!--table rows-->
</table>
</div>

请参阅下面的示例。

注意:我将 AJAX 调用更改为 an endpoint来自 StackExchange API ,从而避免 CORS 问题。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.containerStyle = {
border: '3px solid #f0f0f0',
'max-height': '100px'
};
$http.get("https://api.stackexchange.com/2.2/users?key=U4DMV*8nvpm3EOpvf69Rxw((&site=stackoverflow&pagesize=10&order=desc&sort=reputation&filter=default")
.then(function(response) {
$scope.names = response.data.items;
if ($scope.names.length > 4) {
$scope.containerStyle['overflow-y'] = 'auto'; // max-height: 30px;';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">

<div ng-style="containerStyle">
<table>
<tr ng-repeat="x in names">
<td>{{ x.display_name }}</td>
<td>{{ x.location }}</td>
</tr>
</table>

</div>
</div>

关于javascript - 如何根据 'ng-style' 计数分配 'ng-repeat' 指令值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41110455/

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