当表格没有行时，AngularJS 隐藏表格

Question

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

我正在迭代表行，但外部表(包括标题)将被渲染，即使没有行。如何内省(introspection)结果数组的长度并将该信息用于 ng-show/ng-hide？

Answer 1

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

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

但请记住，您的过滤器将在每个摘要周期中对数组的所有项目运行两次。如果性能可能是一个问题，那么您可能希望 Controller 为您消化这个值并将其绑定(bind)到您的作用域:

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>