How to make a ngRepeat without a parent element?

Navigation
2

I'm using Angle with Admin LTE. I need to make a ng-repeat where li within ul will repeat. I can not repeat ul , but only li within that ul . Also I can not enclose these li with a parent element to make the repeat loop with ng-repeat , as this is breaking the style, since the css selector is capturing ul.timeline > li .

My code looks like this, and the commented lines indicate where I need to start and terminal the ngRepeat : 

<ul class="timeline" >

    <!-- [ngRepeat status in os.status] precido repetir daqui -->

    <li class="time-label">
        <span class="bg-blue" ng-bind="status.nome"></span>
    </li>

    <li>
        <i class="fa fa-check bg-green"></i>
        <div class="timeline-item">
            <h3 class="timeline-header">
                Responsável: <strong ng-bind="status.pivot.usuario.nome"></strong>
            </h3>
            <div class="timeline-body">
                <strong ng-bind="status.pivot.usuario.nome" /> realizou <span ng-bind="status.nome" /> em <strong ng-bind="status.pivot.data_inicio" />.
            </div>
        </div>
    </li>

    <!-- [endNgRepeat] até aqui -->

    <li>
        <i class="fa fa-clock-o bg-gray"></i>
    </li>
</ul>

I can not use an element that includes the li that I want to repeat, but I need them to be repeated within the commenting section. How to do this?

    
asked by anonymous 31.08.2016 / 20:06

2 answers

4

No Angular you have ng-repeat-start where you can do what you want. Your code would look something like this: 

<ul class="timeline" >
    <li class="time-label" ng-repeat-start="item in items">
        <span class="bg-blue" ng-bind="status.nome"></span>
    </li>
    <li ng-repeat-end>
        <i class="fa fa-check bg-green"></i>
        <div class="timeline-item">
            <h3 class="timeline-header">
                Responsável: <strong ng-bind="status.pivot.usuario.nome"></strong>
            </h3>
            <div class="timeline-body">
                <strong ng-bind="status.pivot.usuario.nome" /> realizou <span ng-bind="status.nome" /> em <strong ng-bind="status.pivot.data_inicio" />.
            </div>
        </div>
    </li>

    <li>
        <i class="fa fa-clock-o bg-gray"></i>
    </li>
</ul>

This way you are showing where the loop will start with ng-repeat-start and where it will end, with ng-repeat-end .

I took the liberty of creating a demo on Plnkr .

    
31.08.2016 / 20:30
3

It looks like this: 

<table>
    <tr ng-repeat-start="item in list">
      <td>I get repeated</td>
    </tr>
    <tr ng-repeat-end>
     <td>I also get repeated</td>
    </tr>
</table>
    
31.08.2016 / 20:24
Do While goes into infinite loop Insert months not in the array