Question

我有嵌套集合，如下所示：

[
  {
    name:    "foo",
    members: ["foo1","foo2"]
  }, {
    name:    "bar",
    members: ["bar1","bar2","bar3"]
  }, {
    name:    "qux",
    members: []
  }
]

由此，我想生成以下标记：

<tbody>
  <tr>
    <th scope="row" rowspan="2">foo</th>
    <td>foo1</td>
  </tr><tr>
    <td>foo2</td>
  </tr><tr>
    <th scope="row" rowspan="3">bar</th>
    <td>bar1</td>
  </tr><tr>
    <td>bar2</td>
  </tr><tr>
    <td>bar3</td>
  </tr>
</tbody>

如果<th>被证明过于尴尬，可以在每一行中重复rowspan个单元格：

<tbody>
  <tr>
    <th scope="row">foo</th>
    <td>foo1</td>
  </tr><tr>
    <th scope="row">foo</th>
    <td>foo2</td>
  </tr><tr>
    <th scope="row">bar</th>
    <td>bar1</td>
  </tr><tr>
    <th scope="row">bar</th>
    <td>bar2</td>
  </tr><tr>
    <th scope="row">bar</th>
    <td>bar3</td>
  </tr>
</tbody>

使用AngularJS完成这样的任务的惯用方法是什么？特别是，我很难看到如何在DOM的单个级别（即ng-repeat元素）上执行嵌套 <tr>。

Answer 1

您无法在一个标签上添加多个重复项。但您可以在表格中添加ng-repeat到<my-element myName="simpleElement" isBold="yes" value="Apple">

tbody

然后，您可以使用<table> <tbody ng-repeat="row in data"> <tr ng-repeat="member in row.members"> <th scope="row" rowspan="{{row.members.length}}" ng-if="$first">{{row.name}}</th> <td>{{member}}</td> </tr> </tbody> </table>和th隐藏额外的ng-if - 这是$first中的本地属性，在重复的第一个元素上变为true。

使用结果

查看JSBin

在单个DOM级别嵌套ng-repeat

1 个答案: