嗨,我被困在一种情况下,我必须创建一个表,以便对于每个元集,我必须在表中显示集合行。理想情况下,像Metaset这样的行应该具有行跨度,并且其中的行必须跨度。像这样
Metaset1 SetAttr1 Setattr2
设置Attr2 SetAttr2
Metaset2 SetAttr1 Setattr2
设置Attr2 SetAttr2
我使用了以下结构:
<tbody ng-repeat="(metaset, ids) in metasetHashMapTree">
<tr>
<td rowspan = "{{(ids.length*2) + 1}}"><span style="font-weight:bold">{{metaset}}</span></td>
</tr>
<tr ng-repeat="item in ids" >
<td width="10%" align="{{item.treeLevelStyle['align']}}" bgcolor="{{item.treeLevelStyle['color']}}"> <span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyId}}</span></td>
<td width="2%" class="{{item['A-S0-a']}}"></td>
<td width="2%" class="{{item['A-S0-b']}}"></td>
<td width="2%" class="{{item['A-S0-c']}}"></td>
<td width="2%" class="{{item['A-S0-d']}}"></td>
<td width="2%" class="{{item['A-S0-e']}}"></td>
<td width="2%" class="{{item['A-S0-f']}}"></td>
<td width="2%" class="{{item['A-S0-g']}}"></td>
<td width="2%" class="{{item['A-S1-a']}}"></td>
<td width="2%" class="{{item['A-S1-b']}}"></td>
<td width="2%" class="{{item['A-S2-a']}}"></td>
<td width="2%" class="{{item['A-S3-a']}}"></td>
<td width="2%" class="{{item['A-S4-a']}}"></td>
<td width="2%" class="{{item['A-S5-a']}}"></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyTenant}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyRelease}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyComponentAffected}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyStatus}}</span></td>
<td font-weight : "{{item.treeLevelStyle['font-weight']}}" bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.Match}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.SellDropFix}}</span></td>
</tr>
</tbody>
我现在有一个要求,即只有元集内的第一行必须首先显示,而其余的行仅应在该元集上单击按钮后才显示。
我如何修改结构以适应该要求。我已经尝试将所有内容都放入一行并转为显示第二行的元数据集,如下所示,但是由于行跨度现在丢失,所以行线出现了。
<tbody ng-repeat="(metaset, ids) in metasetHashMapTree">
<!-- <tr>
<td rowspan = "{{(ids.length*2) + 1}}"><span style="font-weight:bold">{{metaset}}</span></td>
</tr> -->
<tr ng-repeat="item in ids" >
<td> <span style="font-weight:bold">{{metaset}}</span></td>
<td width="10%" align="{{item.treeLevelStyle['align']}}" bgcolor="{{item.treeLevelStyle['color']}}"> <span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyId}}</span></td>
<td width="2%" class="{{item['A-S0-a']}}"></td>
<td width="2%" class="{{item['A-S0-b']}}"></td>
<td width="2%" class="{{item['A-S0-c']}}"></td>
<td width="2%" class="{{item['A-S0-d']}}"></td>
<td width="2%" class="{{item['A-S0-e']}}"></td>
<td width="2%" class="{{item['A-S0-f']}}"></td>
<td width="2%" class="{{item['A-S0-g']}}"></td>
<td width="2%" class="{{item['A-S1-a']}}"></td>
<td width="2%" class="{{item['A-S1-b']}}"></td>
<td width="2%" class="{{item['A-S2-a']}}"></td>
<td width="2%" class="{{item['A-S3-a']}}"></td>
<td width="2%" class="{{item['A-S4-a']}}"></td>
<td width="2%" class="{{item['A-S5-a']}}"></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyTenant}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyRelease}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyComponentAffected}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.BuyStatus}}</span></td>
<td font-weight : "{{item.treeLevelStyle['font-weight']}}" bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.Match}}</span></td>
<td bgcolor="{{item.treeLevelStyle['color']}}"><span style="font-weight:{{item.treeLevelStyle['font-weight']}}">{{item.SellDropFix}}</span></td>
</tr>
</tbody>`
请帮忙。
最佳答案
按照documentation中的建议,应使用LimitTo过滤器。
<tr ng-repeat="item in ids | limitTo:2" >
限制量可以在控制器中指定,也可以直接插入过滤器中。