ng-repeat-start与ng-repeat的重要性

Question

我想了解的意义ng-repeat-start上ng-repeat.角度文档提供了以下示例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标签.所不同的仅仅是与帮助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-start和ng-repeat-end:

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

所以,现在你可以看到,在第一种情况下只是div用ng-repeat指令重复,但是在第二种情况中您的div旨意重复.

您可以看到演示并使用它:

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

Answer 2

我想我会添加我的答案,因为没有人提到有这些指令可用的非常重要的原因. 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