How can I base a cells colspan on a conditional value using angular?

Question

Based on a value elsewhere on the html page I need a row within a table to show more cells then everywhere else in the table. In order to keep alignments correct and everything clean I am looking for a way to dynamically set the colspan of a cell using angular. I just can't seem to get this working.

<input type="checkbox" ng-model="vm.noInventory"/>

<table>  
  <th>
     <td>Product</td>
     <td colspan={{vm.noInventory ? '2' : '1'}}>Inventory<td>
     <td ng-show="vm.noInventory"></td>
  </tr>
  <tr>
     <td>Product B</td>
     <td>55 parts</td>
     <td ng-show="vm.noInventory">Backordered</td>      
  </tr>

</table>

Solution 1

Found the solution... I actually had a typo and needed to include "" in the colspan...

<td colspan="{{vm.noInventory ? '2' : '1'}}">Inventory<td>

Solution 2

If you are working in angular where table rows are dynamically generated you can use following <td [attr.colspan]="fieldsChanged.fieldName == 'Comments' ? '2' : ''"> {{fieldsChanged.newValue}}</td>

Solution 3

Another method if you are ok with setting colspan through CSS would be to leverage ng-style and define a function which returns an object similar to the one you specified inline.

For example you could add the ng-style directive to the TD element like below:

<td ng-style=vm.colWidth(vm.noInventory)>Inventory<td>

And in your JS:

vm.colWidth = function(noInv) {
  return  {"colspan": noInv ? '2' : '1' };
};

Comments

[Jorge Casariego]

Thanks! With Angular 2 I'm doing in this way: [attr.colspan]="isTrueValue ? '2' : '0'"