当表格没有行时AngularJS隐藏表格答案

【问题标题】：AngularJS hide table when table has no rows当表格没有行时AngularJS隐藏表格
【发布时间】：2014-01-23 06:46:00
【问题描述】：

当表格没有行时，如何有条件地隐藏 HTML 表格？由于我使用过滤器，我事先不知道结果集是否为空。

我正在遍历表行，但即使没有行，外部表（包括 thead）也会被渲染。如何内省结果数组的长度并将该信息用于 ng-show / ng-hide？p>

【问题讨论】：

请出示您的代码。
How to change class depending on filter result in AngularJS? 的可能重复项

【解决方案1】：

有一些可能的解决方案，但最好的解决方案取决于您的要求和限制。如果它不是一个庞大的应用程序，并且您不希望未过滤的数组中有太多项目，那么最好的解决方案可能是简单地使用具有相同过滤器的 ng-show：

<table ng-show="(items | filter:criteria).length">
  <tr ng-repeat="item in items | filter:criteria">...</tr>
</table>

但请记住，您的过滤器将在每个摘要循环中遍历数组的所有项目两次。如果性能可能是一个问题，那么您可能希望您的控制器为您消化此值并将其绑定到您的范围：

controller('YourCtrl', function($scope, $filter) {
  // $watchCollection available in version 1.1+
  $scope.$watchCollection('items', function(newVal) {
    $scope.filteredItems = $filter('filter')(newVal, $scope.criteria);
  });
});

在您的 HTML 中：

<table ng-show="filteredItems.length">
  <tr ng-repeat="item in filteredItems">...</tr>
</table>

【讨论】：

这是一个很好的答案，特别是关于在控制器中进行过滤的建议。
我把我的控制器放在这里jsfiddle.net/jaL6b/1 并包括你的解决方案。但是 watchcollection 没有被调用。使用角度 1.2.6
好的，再试一次。请参阅jsfiddle.net/jaL6b/2：我现在正确注册了过滤器功能，并且它被调用了。我注意到的唯一奇怪的事情是，过滤器函数 get 是针对集合中的每个项目调用的，而不是整个集合。我认为这个过滤函数应该返回过滤后的数组。
小提琴不工作，他们有无效的JS代码，也许你改变了它？
@CaioToOn 我在创建 MWE 时遇到了困难，这些东西只是新的（对我来说）。但是过滤器只接收一个元素而不是数组。因此，它无法按照您的建议返回（和设置）数组。