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 wrote Angularjs code for the above.

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

td with rowspan is repeated using ng-repeat, which is not required. How can i avoid this?

Answer 1

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

ngIf is similar to ngShow , except that it removes it from the DOM instead of setting display: none if the expression is false (for example, 0 or an empty string) that looks like what you want:

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

Answer 2

Have you tried using ng-class? Something like <td ng-class='{rowSpanClass: row.holidaysavings >== "$50"}