2

Estou usando o Angular com Admin LTE. Preciso fazer um ng-repeat onde as li dentro de uma ul vão se repetir. Não posso repetir a ul, mas apenas as li dentro desse ul. Também não posso englobar essas li com um elemento pai para fazer o laço de repetição com ng-repeat, pois isso está quebrando o estilo, uma vez que o seletor do css está capturando ul.timeline > li.

O meu código está assim, e as linhas comentadas indicam onde preciso iniciar e terminal o 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> 

Não posso usar um elemento englobando as li que quero repetir, mas preciso que elas se repitam dentro do trecho comentando. Como fazer isso?

2
  • Não sei se entendi direito. Você quer utilizar o mesmo ng-repeat com os dois elementos li?
    – Randrade
    31/08/2016 às 18:20
  • @Randrade preciso que o ng-repeat comece onde está comentado [ngRepeat status in os.status] e termine onde está comentado [endNgRepeat]. Porém não posso "englobar" com um elemento, para usar ng-repeat, pois os elementos tirariam a formatação do css. 31/08/2016 às 18:21

2 Respostas 2

4

No Angular você tem o ng-repeat-start onde você pode fazer o que deseja. Seu código ficaria mais ou menos assim:

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

Dessa forma você está mostrando onde irá começar o laço com o ng-repeat-start e onde terminará, com o ng-repeat-end.

Tomei a liberdade de criar uma demo no Plnkr.

2
  • 1
    Interessante +1. No momento que eu tive o problema, pensei que o Angular teria uma maneira de fazer isso através de comentários html, mas foi mais simples do que eu pensava; 31/08/2016 às 18:32
  • @WallaceMaxters Existem várias coisas que o Angular possui e que muitos desconhecem.
    – Randrade
    31/08/2016 às 18:40
3

Faz tipo isso:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .