angularjs - ng-repeat-start vs ng-repeat 的意义

Question

我试图理解 ng-repeat-start 的重要性在 ng-repeat . angular 文档为 ng-repeat-start 提供了以下示例

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

但同样可以使用 ng-repeat 来实现,

<div ng-repeat="item in items">
  <header>
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer>
    Footer {{ item }}
  </footer>
</div>

有人能解释一下 ng-repeat-start的意义吗？ .?谢谢。

Answer 1

我想我会添加我的答案，因为没有人提到提供这些指令的一个非常重要的原因。 ng-repeat使用 html 表格时，在某些情况下将无法正常工作。使用 ng-repeat-start是完成某些事情的唯一途径。

想象一下，您想使用 html 表格显示这样的数据:



这是您的数据集:

groups = [
    {
        name: "Group 1",
        customers: [
            {id: 123, name: "Foo Inc.", state: "NJ"},
            {id: 234, name: "Bar Co.", state: "AZ"}
        ]
    },
    {
        name: "Group 2",
        customers: [
            {id: 345, name: "Baz LLC", state: "CA"}
        ]
    }
];

使用 ng-repeat-start和 ng-repeat-end你可以这样做:

<table>
    <tr>
        <th>ID</th>
        <th>Customer</th>
        <th>State</th>
    </tr>
    <tr ng-repeat-start="group in groups">
        <td colspan="3" style="text-align:center">{{group.name}}<td>
    </tr>
    <tr ng-repeat-end ng-repeat="customer in group.customers">
        <td>{{customer.id}}</td>
        <td>{{customer.name}}</td>
        <td>{{customer.state}}</td>
    </tr>
</table>

请注意 ng-repeat-end其次是另一个常规 ng-repeat .这样就结束了匹配 ng-repeat-start但在 customers 上启动另一个重复数组，因为我们还在原来的 ng-repeat-start调用时的范围 ng-repeat-end ，我们仍然可以访问 group目的。

请记住，这是一个非常简单的例子，但随着表结构变得越来越复杂，完成这样的事情的唯一方法是使用 ng-repeat-start和 ng-repeat-end