如何根据通过 ng-iterate 填充的 td 内容隐藏 html 表格列答案

【问题标题】：how to hide html table column based on td content populated via ng-iterate如何根据通过 ng-iterate 填充的 td 内容隐藏 html 表格列
【发布时间】：2017-11-03 15:48:22
【问题描述】：

我正在使用 angularjs 填充如下表格：

<table>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td>{{row.col1}}</td>
      <td>{{row.col2}}</td>
      <td>{{row.col3}}</td>
      <td>{{row.col4}}</td>
      <td>{{row.col5}}</td>
    </tr>
  </tbody>
</table>

因为该表有很多通常不包含值 (NULL) 的列，所以我想隐藏这些列。
注意：所有行的该列值为 NULL。

示例（row.col1=NULL、row.col3=NULL）：

<table>
  <thead>
    <tr>
      <th>col2</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td>{{row.col2}}</td>
      <td>{{row.col4}}</td>
      <td>{{row.col5}}</td>
    </tr>
  </tbody>
</table>

到目前为止，我无法找到/找出解决方案。

我开始相信这是不可能的......

【问题讨论】：

你可以使用 ng-if，正如这个问题stackoverflow.com/questions/23465835/…所描述的那样
我也找到了答案，但这是一个非常简单的例子。它只有 1 行，没有表头...
@udo 你检查我的 plunk 了吗？
道歉。我周末不在。我只能检查星期一：|
@dev8080，您的代码有效。好的。谢谢！

标签： angularjs html-table

【解决方案1】：

您可以为所需的每一列创建一个具有布尔变量的全局数组，并相应地设置该布尔变量。

 $scope.showColumn = [false, false, false, false];

使用函数来显示列值，以便在遇到非空值时设置布尔值。

  $scope.setVisible = function(colNum, colVal){
    if(colVal)
      $scope.showColumn[ colNum ] =true;
    return colVal;
  };

然后您必须检查布尔值是否显示并将该函数用于您的列值：

<tr ng-repeat="friend in friends">
     <td ng-show="showColumn[0]">{{ setVisible(0, friend.name ) }}</td>
     ...

见Working plunk（尝试给任何朋友一个“无”属性）

【讨论】：

【解决方案2】：

这在 ng-repeat 中很容易做到。只需使用 ng-if。

<table>
  <thead>
    <tr>
      <th>col2</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    // ADD NG-IF TO YOUR REPEATER
    <tr ng-repeat="row in rows" ng-if="row.col1 != null">
      <td>{{row.col2}}</td>
      <td>{{row.col4}}</td>
      <td>{{row.col5}}</td>
    </tr>
  </tbody>
</table>

【讨论】：