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>
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>
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' };
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With