AngularDart: как использовать два выражения ng-repeat с одним тегом?

Question

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

    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. Является ли это возможным?

angularjs dart angular-dart

2

Mikhail Turilin 31 Июл 2014 в 02:33

Answer 1

Используйте модель таблицы и одиночный 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 в 23:10

Я хотел бы, чтобы был способ сделать это в шаблоне. Однако это решает проблему. Спасибо!

–

Mikhail Turilin

3 Авг 2014 в 23:30

Это замедлит заполнение данных, если ваши данные даже немного больше. Рекомендуется только для количества данных <= 10

–

jafarbtech

24 Мар 2021 в 09:59

Answer 2

Пока нашел одно решение. Видимо тег 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 31 Июл 2014 в 02:44

Answer 3

Вы можете использовать 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 в 06:21

Спасибо! Это полезно для подавления повторяющихся имен клиентов.

–

Mikhail Turilin

1 Авг 2014 в 03:56

Это решает вашу проблему? Пожалуйста, отметьте это как правильный ответ, если это так :)

–

Lawrence Choy

1 Авг 2014 в 12:10

Спасибо за ответ. Это не решает проблему "Как использовать два выражения ng-repeat с одним тегом?" If разрабатывает мое обходное решение, добавляя определенные теги форматирования таблицы, о чем я не задавал вопросов. В любом случае спасибо за усилия.

–

Mikhail Turilin

3 Авг 2014 в 00:30

Answer 4

Для этого вы можете попробовать использовать 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 в 16:25

AngularDart: как использовать два выражения ng-repeat с одним тегом?

4 ответа

Похожие вопросы

Новые вопросы

angularjs