12

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>
silvster27
  • 1,916
  • 6
  • 30
  • 44

4 Answers4

19

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

<td colspan="{{vm.noInventory ? '2' : '1'}}">Inventory<td>
silvster27
  • 1,916
  • 6
  • 30
  • 44
11

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>

Sushrut Singh Sisodiya
  • 942
  • 6
  • 11
1

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' };
};
Christian M. Macy
  • 71
  • 1
  • 2
0

For anyone having issues getting this to work, the top comment on this post helped. In the end I used [colSpan]="holdingsData.fund.entity[0].ticker ? '2' : '1'"obviosly enter your own variable and it should do the trick.

jawn
  • 851
  • 7
  • 10