How can I set a colspan cell to a conditional value using angular?

Question

Depending on the value elsewhere on the html page, I need a row inside the table to display more cells and then everywhere in the table. To keep alignment correct and everything clean, I'm looking for a way to dynamically set colspan cells using angular. I just can't get this to work.

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

Answer 1

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

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

Answer 2

, colspan CSS, ng-style , , , .

, ng-style TD, :

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

JS:

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