ng-repeat without an html element

Question!

i am trying to generate a blog list but i got a problem with ng-repeat. my list looks like this

<ul>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <span class="sep2"></sep>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <span class="sep2"></sep>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
    <li>
        <h2>Title</h2>
        <p>Message</p>
    </li>
</ul>

So after every 2 list items, i have a span that levels my next 2 boxes. Right now i have this angular code.

<ul>
    <li ng-repeat="post in postsJSON">
        <h2>{{post.title}}</h2>
        <p>{{post.message}}</p>
    </li>
</ul>

And i dont know how to generate that span after every second list item. Thank you in advance, Daniel!



Answers

The issue here is not really with angular but more with the structure of your markup. ul tag should normally only contains li tags as children.

To resolve your issue I will stick to the ng-repeat you already have and create the separator with css. Something like that :



This video can help you solving your question :)
By: admin