Vallabh Rao Vallabh Rao - 3 months ago 17
AngularJS Question

ng-repeat only on inner elements

I find this problem with ng-repeat that the tag where it is used is also gets repeated, how to repeat only the elements inside it?

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

Ven Ven
Answer

AngularJS has a feature for that: ng-repeat-start and ng-repeat-end. They allow you to avoid a wrapper altogether, because they don't incur nesting.

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

The repeat will be active starting from the element that has the ng-repeat-start="...", up to the element that has the ng-repeat-end.

See the ngRepeat docs.

Comments