如何让 ng-grid 隐藏某些行答案

【问题标题】：How to get ng-grid to hide certain rows如何让 ng-grid 隐藏某些行
【发布时间】：2013-08-29 16:23:45
【问题描述】：

我有一个要在 ng-grid 中显示的对象数组。每行都有一个布尔属性isVisible。在 ng-grid 中，我只想显示 isVisible 为真的行。其他行应完全隐藏。

我尝试使用rowTemplate 并将ng-show 数据绑定到isVisible。这隐藏了行的内容，但将实际行留在原处，显示一个空行。

我尝试过使用 filterOptions，但无法找出执行此类过滤的正确语法。我找不到任何关于如何设置它的好文档。

我什至尝试通过在ng-repeat=\"row in renderedRows\" 上添加过滤器来修改 ng-grid 源中的 gridTemplate，但我也没有让它工作。

我想我可以通过临时删除行来修改数组本身，但我不希望这样做，因为我必须能够再次显示行（它实际上是我正在做的扩展器，应该隐藏/显示子行）

【问题讨论】：

你看过 SO 16546678 (stackoverflow.com/questions/16846678/…) 吗？它不是真正隐藏，而是通过重新创建 gridOptions.data 对象过滤掉行。还有一个 plunker：plnkr.co/edit/2RXlNq?p=preview
@AardVark71 我想避免拥有数据对象的多个副本。一方面，stackoverflow.com/questions/17847119/… 暗示该解决方案存在内存泄漏。
您不需要数据的另一个副本，只需要一个单独的数组。同样，您还可以绑定到过滤数据的函数，而不是 $scope.data，而是绑定到 $scope.filteredData()。每当 Angular 运行摘要时都会调用它。

【解决方案1】：

还可以尝试根据 isVisible 有条件地将模板中的行高设置为“0”，或者使用带有 ng-class 的 CSS 类。使用它的 CSS 直到你得到想要的效果，然后你可以在你的模板中使用它。

这听起来像是实际上可以从使用高度和 CSS 动画中受益的类型，因此它以动画样式打开和关闭。如果您有 jsFiddle 示例，我很乐意尝试并提供帮助。

编辑：在查看了网格实际上如何布置它的行（绝对定位）之后，您实际上只有两个我能想到的选择：

1) 通过dataVisible() 之类的函数过滤您绑定到网格的数据，但将完整的数据列表保留在控制器内部，以便您可以轻松显示/隐藏

2) 向 ng-grid 项目（或 fork）提交一个补丁，该补丁具有您正在寻找的过滤功能。开箱即用它似乎不支持这种情况。

【讨论】：

将高度设置为“0”没有任何作用。我将它设置在 rowTemplate 的所有元素上，但该行仍然显示。在 rowTemplate 的所有元素上设置 ng-hide='true' 会隐藏该行的内容，但仍会显示空行。
是的，我正在查看 ng-grid，它似乎绝对定位每一列，因此以下列具有“顶部”属性，因此它们不只是堆叠。您唯一的选择是从数据列表中筛选出项目。您可能应该创建一个“dataVisible”列表，甚至是一个为您过滤的函数“dataVisible()”，但在内部保留完整列表，以便您可以轻松地显示/隐藏它们。