如何在多个div元素上使用ng-repeat？

Question

我想实现以下目标（不起作用）：

<div ng-repeat="product in products">{{product.headline}}</div>
<div>{{product.text}}</div>

我只是首先看到所有标题，然后是彼此之下的所有文本。如何在额外的div元素上再次引用产品？

Answer 1

Angular中有一个漂亮的功能，其中一些指令，如ng-repeat，支持跨越多个元素：

<div ng-repeat-start="product in products">{{product.headline}}</div>
<div ng-repeat-end>{{product.text}}</div>

您还可以创建支持此功能的自定义指令。以下是Angular docs的摘录：

  

multiElement

     

当此属性设置为true时，HTML编译器将在具有属性directive-name-start和directive-name-end的节点之间收集DOM节点，并将它们组合在一起作为指令元素。建议将此功能用于非严格行为的指令（例如ngClick），并且不要操作或替换子节点（例如ngInclude）。