当表没有行时,AngularJS隐藏表

Question

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

我正在迭代表行,但外表(包括thead)将被渲染,即使没有行.如何反省结果数组的长度并将该信息用于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('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>