如何根据“ng-repeat”计数分配“ng-style”指令值答案

【问题标题】：How to assign 'ng-style' directive value based on 'ng-repeat' count如何根据“ng-repeat”计数分配“ng-style”指令值
【发布时间】：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>

【问题讨论】：

标签： javascript html css angularjs angularjs-directive

【解决方案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=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>

【讨论】：

谢谢，为什么要硬编码容器的高度？使用 ng-if 指令是否无法即时检查 ng-repeat 计数？
我这样做是为了演示 overflow-y 属性...您可以随意调整它。