根据屏幕尺寸限制表行数

Question

因此，我在一个集合中有n个对象。我在ng-repeat中使用<tr>。

是否有一种方法可以限制表格在html中生成的行数，以使表格不超过当前屏幕的高度？

Answer 1

您可以尝试以下操作：

您可以获取要在其中创建表格的元素的高度。假设高度为 300px 。
然后，您可以获取表格行的高度（<td>，例如 30px 。

现在可以在屏幕上显示的行数将是300/30 = 10（包括标题）。

因此您可以在$index == 10上使用ng-if（带有ng-repeat）。

  

值将根据您的屏幕尺寸而改变。

Answer 2

为此，您可以按照以下步骤操作：

1. 在准备好屏幕或加载视图（从服务器获取数据之前）上，通过计算高度( view-port height - header height - footer height - if any other)

来固定表格高度。

2. 使用Overflow : Auto编写CSS规则，以在数据超过时启用自动滚动。

Answer 3

我认为您可以通过了解表格的<td>高度和屏幕尺寸（window.screen.height）来做到这一点。

numberOfRows = Math.floor(window.screen.height / tdHeight)