Question

我发现这个问题用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>

Answer 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

Answer 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>

仅对内部元素进行ng-repeat

2 个答案: