Skip repeat for some columns in ng-repeat

Question

I wanted to have a table like this using angular repeat

HTML

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>

  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

I have written an Angularjs code for the above as follows.

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr ng-repeat="row in rows">
    <td>{{row.month}}</td>
    <td>{{row.savings}}</td>
    <td rowspan="2">{{row.holidaysavings}}</td>      
  </tr> 
</table>

The td with rowspan gets repeated using ng-repeat which is not required. How can I avoid this?

Answer 1

If you want the last td element only if row.holidaysavings is set (you didn't mention it, but it sounds like it!), you can use ngIf.

ngIf is similar to ngShow with the exception that it removes it from the DOM instead of setting display: none if the expression is falsy (for example 0 or the empty string), which sounds like what you want:

<td rowspan="2" data-ng-if="row.holidaysavings">{{row.holidaysavings}}</td>