Question

我有一个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>

Answer 1

使用ngStyle。将（ng-）样式应用于包含该表的元素可能是最好的。设置 height 属性（例如 100px ）。然后 overflow-y 样式将导致超出该阈值的任何内容添加到滚动区域中。

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

请参阅下面的示例。

注意：我将an endpoint的AJAX调用更改为StackExchange API，以避免出现CORS问题。

＆＃13;

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;';
      }
    });
});

＆＃13;

<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>

＆＃13;

Answer 2

要选择表格应使用哪种样式，您可以使用三元运算符来选择样式集。

<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>

如何指定＆＃39; ng-style＆＃39;指令值基于＆＃39; ng-repeat＆＃39;计数

2 个答案: