how to hide html table column based on td content populated via ng-iterate

Question

I am populating a table like the following using 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>

because the table has a lot of columns which often contain no values (NULL), I would like to hide those columns.
note: all rows would have that column value NULL.

Example (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>

so far I was not able to find/figure out a solution for this.

I'm starting to believe that this is not possible to do...

You can use ng-if, as described by this question https://stackoverflow.com/questions/23465835/how-to-use-ng-if-with-table-to-display-td-based-on-the-condition — Sharondio, Nov 03 '17 at 16:03
I also found that answer, but it's a pretty simple example. it's just 1 row with no table header... — udo, Nov 03 '17 at 16:27
apologies. I'm away for the weekend. I can only check monday :| — udo, Nov 03 '17 at 21:05

dev8080 · Accepted Answer · 2017-11-03T16:42:20.857

You could a global array that has a boolean variable for each column you want, and set that boolean accordingly.

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

Use a function to display your column value that way you get to set your booleans in case you encounter a non-null value.

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

You'll then have to check the boolean for display and use the function for your column value:

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

See Working plunk (try giving a 'none' property to any friend)

score 0 · Answer 2 · answered Nov 03 '17 at 16:17

This is very easy to do in an ng-repeat. Just use 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>

how to hide html table column based on td content populated via ng-iterate

2 Answers2