Мне нужно создать сгруппированную таблицу, например:

    Customer            Site
    ------------------------------
    Customer 1          Site 1.1
                        Site 1.2
                        Site 1.3
    Customer 2          Site 2.1
                        Site 2.2

Для этого в HTML мне нужно было бы прикрепить два ng-повтора к одному элементу tr:

    <tr ng-repeat="customer in customers" ng-repeat="site in customer.sites">
        <td> {{ customer.name }}</td>
        <td> {{ site.name }}</td>
    </tr>

Этот точный синтаксис не работает. Теги Div и Span внутри Tbody не допускаются. Я бы предпочел не форматировать данные в контроллере заранее. Мне просто нужен способ использовать два ng-повтора с одним тегом TR. Является ли это возможным?

2
Mikhail Turilin 31 Июл 2014 в 02:33

4 ответа

Лучший ответ

Используйте модель таблицы и одиночный ng-repeat.

Возьмите список customers и преобразуйте его во что-то, что представляет строки вашей таблицы:

get customerAndSiteNames () {
   // naive approach. maybe use List.expand
   var result = [];
   customers.foreach((customer) {
       result.add({
         'customer': customer.name
         'site' : customer.sites[0].name
       });
       customer.sites.sublist(1).forEach((site){
         result.add({
           'site' : site.name
       }
   }
   return result;
}
<tr ng-repeat="customerSite in customerAndSiteNames">
    <td> {{ customerSite.customer }}</td>
    <td> {{ customerSite.site }}</td>
</tr>
3
Ozan 2 Авг 2014 в 19:10

Пока нашел одно решение. Видимо тег tbody мог повторяться.

Итак, я могу сделать что-то вроде:

<tbody ng-repeat="customer in customers">
    <tr ng-repeat="site in customer.sites">
        <td> {{ customer.name }}</td>
        <td> {{ site.name }}</td>
    </tr>
</tbody>

Однако первоначальный вопрос все еще остается в силе.

2
Mikhail Turilin 30 Июл 2014 в 22:44

Вы можете использовать rowspan:

<table>
      <tbody ng-repeat="customer in customers">
        <tr ng-repeat="site in customer.sites">
          <td rowspan="{{customer.sites.length}}" ng-if="$index==0">{{customer.name}}</td>
          <td>{{site.name}}</td>
        </tr>
      </tbody>
    </table>

Вот рабочий плункер

Часть ng-if означает, что добавляется DOM tr только для первой строки. Похоже, его можно улучшить, но, по крайней мере, он выполняет свою работу.

0
Lawrence Choy 31 Июл 2014 в 02:21

Для этого вы можете попробовать использовать ng-repeat-start:

<tr ng-repeat-start="customer in customers"> 
   <tr ng-repeat-end ng-repeat="site in customer.sites">
      <td> {{ customer.name }}</td>
      <td> {{ site.name }}</td>
   </tr>
</tr>
0
jim31415 17 Фев 2017 в 13:25