使用 rowspan 对层级数据进行分组

Question

在使用AngularJS渲染表格时，是否可以按照 这里所述的方式对数据进行分组（使用rowspan）？数据具有层次结构，state拥有多个counties，每个county又有多个zipcodes。我希望得到一个只包含州、县、邮政编码等列的表格（因此要为集合的长度设置rowspan）。我不确定是否可以使用ng-repeat-start和ng-repeat-end来实现这一点。请参阅起始模板此处。

 <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

- bsr

---

你可以通过编写一些期望的输出来展示你的意思。 - Kerstomaat

@SimonPlus 请在这里查看：http://plnkr.co/edit/T7toND0odx6qr8mVC121?p=preview - bsr

@bsr 你找到解决方案了吗？ - WelcomeTo

Answer 1

这是对 Holly Cummins 答案的改进版。通过在 tr 中使用 ng-repeat-start 和 ng-repeat-end，将重复功能移动到其中，以防止重复出现 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>

- Robert Brooker

---

为了正确性，我认为应该写成st.counties[0].name。 - Busata

非常好的答案。帮了我很多忙！虽然我来晚了，但我更喜欢使用ng-if="!$first"来抑制第一个“following”行中的第一个单元格，因为这样可以通过根本不在DOM上拥有该元素来使HTML更加清洁 :) - Dave Thomas

同意，这将产生更好的HTML，我只是喜欢ng-hide的外观，因为代码看起来更可读，因为它非常接近于说“隐藏第一个”。 - Robert Brooker

非常感谢您！ - 0xtuytuy

Answer 2

这个版本的KayakDave答案通过将第一个嵌套行拉出来与标题的<tr>共享，从而改进了结构：

<tbody ng-repeat='st in states'>
    <tr>
      <th rowspan="{{st.counties.length}}">{{st.name}}</th>
      <td>{{county[0].name}}</td>
    </tr>
    <tr ng-repeat='county in st. counties' ng-show="$index > 0">
       <td>{{county.name}}</td>
    </tr>
</tbody>

- Holly Cummins

Answer 3

当然。您是否希望翻译以下类似的内容：

<tbody ng-repeat='st in states'>
    <td rowspan="{{st.counties.length+1}}">{{st.name}}</td>
    <tr ng-repeat='county in st.counties'>
       <td>{{county.name}}</td>
    </tr>
</tbody>

我将这个示例保持简单，嵌套了2层。但是在下面的fiddle中，我将其嵌套到3层（因此包括zip）。

演示fiddle

- KayakDave

---

谢谢提供示例。但是，它的结构不正确。请查看应用了CSS类的示例：http://plnkr.co/edit/FqCHTodxoJSegw6CySaS?p=preview。第三列嵌套在第二列中。此外，我不确定tr是否可以嵌套在td中。 - bsr

一个表格可以嵌套在td中，其中包含一个table内的tr，这就是我采用这种方式的原因。要创建您在问题中添加的结构，我会编写一个自定义指令。 - KayakDave

Answer 4

这可能会有用

<table>
    <tbody ng-repeat='st in states'>
        <tr>
            <th >{{st.name}}</th>
            <td>
                <table>
                    <tr ng-repeat='county in st.counties'>
                        <td>{{county.name}}</td>
                        <td>
                            <table>
                                <tr ng-repeat='zip in county.zips'>
                                    <td>{{zip}}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </tbody>
</table>

- Aravind Kumar