Использование rowspan для группировки иерархических данных

Можно ли группировать данные (используя rowspan, как описано здесь) в таблице, созданной с помощью угловых символов. Данные иерархичны, а state имеет много counties, и каждый граф имеет несколько zipcodes. Я хочу таблицу с только столбцом для состояния, графства, zip и т.д. (Так что дайте rowpan для длины коллекции). Я не уверен, что 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

Ответ 1

Это вариант ответа Холли Камминса. Повтор перемещается в 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>

Ответ 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>

Ответ 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 глубоким. Но в скрипке ниже, я получил вложенные 3 глубины (так это включает в себя zip).

демонстрационная скрипка

Ответ 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>