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都会被重复。

你可以看到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-end后跟另一个常规ng-repeat。这会结束匹配ng-repeat-start，但会在customers数组上启动另一个重复，因为我们在调用ng-repeat-start时仍处于原始ng-repeat-end范围内，我们仍然可以访问{ {1}}对象。

请记住，这是一个非常简单的例子，但随着表结构变得更加复杂，完成这样的事情的唯一方法是使用group和{{1 }}

Answer 3

  

ng-repeat-start指令与ng-repeat的作用相同，但会重复所有HTML代码（包括它定义的标记），包括放置ng-repeat-end的结束HTML标记< / p>