如何根据“ng-repeat”计数分配“ng-style”指令值
Posted
技术标签:
【中文标题】如何根据“ng-repeat”计数分配“ng-style”指令值【英文标题】：How to assign 'ng-style' directive value based on 'ng-repeat' count 【发布时间】：2017-04-27 21:15:28 【问题描述】：我有一个 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>
【问题讨论】：
【参考方案1】：要选择表格应使用的样式集，您可以使用三元运算符来选择样式集。
<div ng-style="(names.length > 4 ? 'overflow-y': 'scroll' : 'overflow-y': 'auto')"
style="height: 50px;">
<table>
...
</table>
</div>
我建议，如果您的样式变得更加复杂，您应该使用ngClass 指令在满足条件的情况下应用一个类，然后在样式表或style 标记中定义您希望应用的样式。在我看来，这将使代码更易于阅读。
<table ng-class="'scrollable': names.length > 4">
<tr ng-repeat="x in names">
<td> x.Name </td>
<td> x.Country </td>
</tr>
</table>
<style>
table
overflow-y: auto;
display: block;
.scrollable
overflow-y: scroll;
<style>
【讨论】：
【参考方案2】：使用ngStyle。最好将 (ng-) 样式应用于包含表格的元素。设置 height 属性（例如 100px）。然后 overflow-y 样式将导致超出该阈值的任何内容添加到滚动区域中。
<div ng-style="containerStyle">
<table>
<!--table rows-->
</table>
</div>
请参阅下面的示例。
注意：我将AJAX调用由StackExchange API改为an endpoint，以避免出现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=***&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>【讨论】：
谢谢，为什么要硬编码容器的高度？使用 ng-if 指令是否无法即时检查 ng-repeat 计数？ 我这样做是为了演示 overflow-y 属性...您可以随意调整它。以上是关于如何根据“ng-repeat”计数分配“ng-style”指令值的主要内容，如果未能解决你的问题，请参考以下文章