Javascript 如何分配'；ng风格'；基于'；ng重复'；计数_Javascript_Html_Css_Angularjs_Angularjs Directive

Javascript 如何分配'；ng风格'；基于'；ng重复'；计数

javascript html css angularjs

Javascript 如何分配'；ng风格'；基于'；ng重复'；计数,javascript,html,css,angularjs,angularjs-directive,Javascript,Html,Css,Angularjs,Angularjs Directive,我有一个Angularjs样本。这里使用ng repeat指令在表中显示名称，我计划添加ng style指令，根据表行数向表中添加垂直滚动条。如何使下面的代码正常工作只有当表格行数大于4时，我们才需要表格的垂直滚动条我试过这样做 <div ng-if= "names.length > 4" ng-style="{'overflow-y': 'auto'}" > <table> --------- </table>

我有一个Angularjs样本。这里使用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>


{{x.Name}
{{x.国家}
var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$http.get（“http://www.w3schools.com/angular/customers.php")
.then（函数（响应）{$scope.names=response.data.records；}）；
});

要选择表格应使用的样式集，可以使用三元运算符选择样式集

<div ng-style="(names.length > 4 ? {'overflow-y': 'scroll'} : {'overflow-y': 'auto'})" 
     style="height: 50px;">
  <table>
    ...
  </table>
</div>

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

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


{{x.display_name}
{{x.location}}

谢谢，为什么我们要硬编码集装箱的高度？使用ng if指令不可能动态检查ng重复计数吗？我这样做是为了演示overflow-y属性。。。您可以根据需要随意调整。

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