Question

我需要创建一个分组表，类似于：

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

要在HTML中执行此操作，我需要将两个ng-repeats附加到单个tr元素：

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

这种确切的语法不起作用。不允许在Tbody内部使用Div和Span标签。我宁愿不预先格式化数据在控制器中。我只需要一种方法来使用两个ng-repeats和一个TR标签。有可能吗？

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>

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>

然而，最初的问题仍然存在。

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>

Here is a working plunker

ng-if部分表示仅为第一行添加tr DOM。看起来它可以改进，但它至少可以完成工作。

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>

AngularDart：如何在一个标签中使用两个ng-repeat表达式？

4 个答案: