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!

Answer 1

With angular v1.2 it becomes quite easy, using ng-repeat-start , ng-repeat-end and ng-if , you can check it here : http://jsfiddle.net/DotDotDot/XNJvj/1/

Your code will look like this:

    <ul>
        <li ng-repeat-start='post in postsJSON'>
            {{post.item}}<br/>
            {{post.message}}
        </li>
        <span ng-if="$odd && !$first" ng-repeat-end>
            <span class="sep2">_____</span>
        </span>
    </ul>

ng-repeat-start/end allows you to enter a loop in a tag and close it in another, in this case, I also added a condition using the $odd parameter of the ng-repeat , showing only every other span

Answer 2

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 :

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

CSS :

.blog.entry {
  border-bottom : 1px solid black // or whatever color
  ...
}

or if you need more control on the separator use css :after and do something like

.blog.entry:after {
  content : "";
  ...
 } 

If you are not familiar with :after you can have a look there