Question

如何使用Angular JS在bootstrap表中执行行跨度？我的表是使用ng-repeat创建的。有了ng-repeat，我认为这是不可能的。所以我看一下ng-grid和ng-table，都有分组。但他们创建了一个可折叠的列。不完全是行距。所以请让我知道我的选择。

我正努力实现：

<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

但它不是静态数据，它将是来自服务器的对象列表。任何帮助表示赞赏

Answer 1

您可以向JSON添加rowspan属性。像：

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

然后您可以像这样使用ng-if和rowspan：

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

您可以遍历JSON并有条件地添加rowspan：

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

这里是plunker。

AngularJS表行跨度

1 个答案: