AngularJS Table row span

Question

How to do a row span in bootstrap table with Angular JS? My table is created using ng-repeat. With ng-repeat I think it is not possible. So I look at ng-grid and ng-table, both have grouping. but they create a collapsible column. not exactly a row span. so please let me know my options.

I am trying to achieve like:

<table border="1" >
    <tr>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
</tr>   
      <tr>
        <td rowspan="3">Jill</td>
        <td>Smith</td> 
        <td>50</td>
    </tr>
     <tr>

        <td>Smith2</td> 
        <td>60</td>
    </tr>
     <tr>            
        <td>Smith3</td> 
        <td>70</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
  </tr>
</table>

http://plnkr.co/edit/1VBQGVoamQbqv9uYmnWB?p=preview

But it is not a static data, it will be a list of object from server. Any help appreciated

Answer 1

You can add a rowspan property to your JSON. Like:

myJson = [{attr1:'foo', attr2:'bar',rowspan:2},{attr1:'foo', attr2:'bar',rowspan:0}];

Then you can use both ng-if and rowspan like this:

<tr>
    <td ng-if="item.rowspan>0" rowspan="{{item.rowspan}}">{{item.attr1}}</td>
    <td>{{item.attr2}}</td>
<tr>

You can iterate through the JSON and add the rowspan conditionally:

data.forEach(function(item){
    if(someCondition){
        item.rowspan = 2; // or 0, 1, 2, 3...
    }
});

Here's the plunker.