ng-repeat-start与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

这两个指令的意义是相似的:它们重复HTML-tag。唯一不同的是，在ng-repeat-start的帮助下，你可以重复几个标签，从ng-repeat-start开始，到ng-repeat-end结束。

例如，你有下面的代码：

<div>
  Item # {{item}}
</div>
<div>Whether you repeat me?</div>

所以现在我们可以为这些代码添加2条指令。

使用 ng-repeat**:**的

<div ng-repeat="item in items">
  Item # {{item}}
</div>
<div>
  This code will not be repeated
</div>

采用 ng-repeat-end**:**和的

<div ng-repeat-start="item in items">
  Item # {{item}}
</div>
<div ng-repeat-end="">This code will be repeated</div>

所以现在您可以看到，在第一种情况下，只重复div with ng-repeat指令，但在第二种情况下，您的两个div都将重复。

您可以查看Demo并使用它：

演示：http://plnkr.co/edit/R778lWTABVF3Hy16CAca

Answer 2

我想我应该加上我的答案，因为没有人提到提供这些指令的一个非常重要的原因。在使用HTML表时，ng-repeat在某些情况下不能正常工作。使用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的ng-repeat-end。这将结束匹配的ng-repeat-start，但会在customers数组上启动另一个重复操作，因为在调用ng-repeat-end时，我们仍然在原始的ng-repeat-start作用域中，所以仍然可以访问group对象。

请记住，这只是一个非常简单的示例，但是随着表结构变得越来越复杂，完成这类任务的惟一方法就是使用ng-repeat-start和ng-repeat-end

Answer 3

ng- repeat -start指令的工作方式与ng-repeat相同，但它将重复所有HTML代码(包括定义它的标记)，直到并包括放置ng-repeat-end的结束标记为止