javascript - 使用 rowspan 对分层数据进行分组

Question

是否可以在用 angularjs 呈现的表中对数据进行分组(使用 rowspan，如 here 所述)。数据是分层的，state 有许多 county，每个县有多个 zipcodes。我想要一个只有州、县、 zip 等列的表(所以给出集合长度的行跨度)。我不确定 ng-repeat-start 和 ng-repeat-end 可用于实现此目的。请参阅入门模板 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

Answer 1

这是 Holly Cummins 答案的变体。使用 ng-repeat-start 和 ng-repeat-end 将重复移动到 tr 以防止 tbody 免于重复。还使用稍微不同的方法来隐藏第一行。

<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>