Angularjs : How to show Empty column using ng-class or ng-if?

Question

I have around 15 rows with 7 columns shown as a table, and after every few rows I shall show an empty row based on a specific grouping and business logic. To mark the same --- is being displayed per column for the whole row.

Now I wanted to show an empty column or just a space that segregates previous and next rows where ever there is a --- , how can I do that with ng-class or ng-if ? I am using bootstrap. Following is my working code

 <tr ng-repeat="row in ctrl.rows" class="myclass">                                            
   <td ng-repeat="col in row" ng-bind="col"></td>
 </tr>

tried something like

<td ng-repeat="col in row" ng-bind="col" ng-class="{col == '---': 'col-sm-1'}"></td> //it didnt work

please help !

Answer 1

try this. your ng-class syntax is incorrect.

 <td ng-repeat="col in row" ng-bind="col" ng-class="{'col-sm-1': col == '---'}"></td>