使用rowspan对分层数据进行分组 [英] Use of rowspan to group hierarchical data
问题描述
是否可以对数据进行分组(使用如href=\"http://www.pdprogrammeur.com/tables-and-html5-table/\" rel=\"nofollow noreferrer\">此处所述的rowspan )在使用angularjs渲染的表中。数据是分层的,州
有多个县
,每个县都有多个 zipcodes
。我想要一个只包含州,县,邮政等列的表(所以给集合的长度为rowpan)。我不确定 ng-repeat-start
和 ng-repeat-end
可用于实现此目的。请参阅入门模板此处
Is it possible to group data (using rowspan as explained here) in a table rendered with angularjs. Data is hierarchical, with state
having many counties
and each counties has multiple zipcodes
. I want a table with only column for state, county, zip etc (so give a rowspan for length of the collection). I am not sure ng-repeat-start
and ng-repeat-end
can be used to achieve this. Please see the starter template here
<table>
<thead>
<tr>
<th>State</th>
<th>County</th>
<th>Zip</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='st in states'>
<td>{{st.name}}</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
数据
var oh_counties = [
{name: "Franklin", zips: [111,222,333,444,555]},
{name: "Adams", zips: [111,222,333,444]},
{name: "Allen", zips: [111,222,333]}
],
wi_counties = [
{name: "Dane", zips: [111]},
{name: "Adams", zips: [111,222,333,444]}
]
$scope.states = [
{name: "OH", counties: oh_counties},
{name: "WI", counties: wi_counties},
];
编辑:
手工制作的版本所需的输出在这里 http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview
推荐答案
这是Holly Cummins回答的变种。使用 ng-repeat-start
和 ng-repeat-将重复移入
以防止重复 tr
结束 tbody
。还使用稍微不同的方法来隐藏第一行。
This is a variant of Holly Cummins' answer. The repeat is moved into the tr
with ng-repeat-start
and ng-repeat-end
to prevent the tbody
from being repeated. Also uses a slightly different method to hide the first row.
<tbody>
<tr ng-repeat-start='st in states'>
<th rowspan="{{st.counties.length}}">{{st.name}}</th>
<td>{{st.counties[0].name}}</td>
</tr>
<tr ng-repeat-end ng-repeat='county in st.counties' ng-hide="$first">
<td>{{county.name}}</td>
</tr>
</tbody>
这篇关于使用rowspan对分层数据进行分组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!