ng-repeat 仅在内部元素上答案

【问题标题】：ng-repeat only on inner elementsng-repeat 仅在内部元素上
【发布时间】：2016-09-05 15:19:17
【问题描述】：

我发现 ng-repeat 的这个问题是使用它的标签也会重复，如何只重复其中的元素？

<div class="accordions" ng-repeat="event in eventsData">
                        <!-- content-title -->
                        <div class="content-title active">Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
                        <!--/content-title -->
                        <!-- accordions content -->
                        <div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
                        <!--/accordions content -->
                        <!-- content-title -->
                        <div class="content-title">Sed vehicula suscipit lacus, eget cursus justo aliquet in. Etiam aliquet vel ipsum ultrices auctor</div>
                        <!--/content-title -->
                        <!-- accordions content -->
                        <div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
                        <!--/accordions content -->
</div>

【问题讨论】：

不将标题和内容包装在 div 中。有什么办法吗？
哦，你需要在包装器和元素之间生成4个元素吗？
你想达到什么目的？如果是简单的事件列表，只需在具有content-title 类的元素上使用一次ng-repeat，同时将content 类元素包装在content-title 类元素中。
是的，我只想重复内容标题和内容，而不是将它们包装起来，它们必须按顺序排列，content-title 和 content 应该交替出现
@PrateekGupta 这不起作用，因为手风琴不需要包装器，我收集。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

AngularJS 有一个特性：ng-repeat-start 和 ng-repeat-end。它们允许您完全避免使用包装器，因为它们不会产生嵌套。

<div class="accordions"> <!-- !! No repeat here -->
  <div class="content-title active"
     ng-repeat-start="event in eventsData"
  >Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
  <div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
  <div class="content-title">Sed vehicula suscipit lacus, eget cursus justo aliquet in. Etiam aliquet vel ipsum ultrices auctor</div>
  <div class="content"
    ng-repeat-end
  >Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
</div>

重复将从具有ng-repeat-start="..." 的元素开始，直到具有ng-repeat-end 的元素处于活动状态。

See the ngRepeat docs.

【讨论】：

它可能不在主题范围内，但是，我认为，如果我这样做，手风琴就不起作用，或者是吗？有什么想法吗？
如果可能的话，你可能会想要一个纯 CSS 的手风琴。否则，使用一些 AngularJS 指令。这样您就可以确定在更新 eventsData 时会更新手风琴。

【解决方案2】：

假设 content-title 和 content 类必须在 eventsData 上重复。

这样做，

<div class="accordions">
    <div class="wrapper" ng-repeat = "event in eventsData">
                        <!-- content-title -->
                        <div class="content-title active">Donec mollis magna quis urna convallis, quis faucibus sem vestibulum. Sed vehicula suscipit lacus</div>
                        <!--/content-title -->
                        <!-- accordions content -->
                        <div class="content">Donec sollicitudin lacus in felis luctus blandit. Ut hendrerit mattis justo at suscipit. Vivamus orci urna, ornare vitae tellus in, condimentum imperdiet eros. Maecenas accumsan, massa nec vulputate congue, dolor erat ullamcorper dolor, ac aliquam eros sem in dui. In eu sagittis metus. Proin consectetur suscipit dui sed euismod. Nam non metus in est vehicula vestibulum et vel neque.</div>
    </div>                           
</div>

【讨论】：

问题要求只重复里面的元素。没有包装。
@Ven 我从来没有说过，这是唯一的解决方案。这是解决方案之一。
问题要求你不要那样做。