How to make an ngRepeat without a parent element?

Asked

Viewed 305 times

2

I’m using Angular with Admin LTE. I need to make a ng-repeat where the li within a ul will repeat. I cannot repeat the ul, but only the li within that ul. I can’t encompass those either li with a parent element to make the repeat loop with ng-repeat, because this is breaking the style once the css selector is capturing ul.timeline > li.

My code is 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’t use an element encompassing li I want to repeat, but I need them to repeat themselves within the commenting section. How to do this?

angularjs ng-repeat

  • I don’t know if I got it right. You want to use the same ng-repeat with the two elements li?

  • @Randrade I need you to ng-repeat start where you are commented [ngRepeat status in os.status] and end where it is commented [endNgRepeat]. However, I cannot "embed" with an element, to use ng-repeat, as the elements would take the format out of css.

2 answers

4


In the Angular you have the ng-repeat-start where you can do what you want. Your code would look more or less 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 you will get the loop with the ng-repeat-start and where it will end, with the ng-repeat-end.

I took the liberty of creating a demo at Plnkr.

  • 1

    Interesting +1. At the time I had the problem, I thought Angular would have a way to do this through html comments, but it was simpler than I thought;

  • @Wallacemaxters There are several things that Angular possesses that many do not know.

3

It’s like that:

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

Browser other questions tagged angularjs ng-repeat

You are not signed in. Login or sign up in order to post.