I have the following menu items
[ { "name": "Home", "target": "#home", "state": "active", "partial_html": "partials/home.html" }, { "name": "Find", "target": "#find", "partial_html": "partials/find.html", "state": "" }, { "name": "Albums", "target": "#albums", "partial_html": "partials/albums.html", "state": "" } ]
How to use ng-repeat to get following output for each element (mi is an item in array menuItems (array definition was given above).
<li class='divider-vertical'></li>
<li class="{{mi.state}}"><a href="{{mi.target}}" ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>
Create and apply a directive on the 2nd LI. Remove the 1st LI from the loop. In the directive, append the 1st LI before the 2nd LI.
Alternatively, a directive can be applied to the parent UL where it will go through each LI and append the divider before it. Not sure if this will work though.
You can also nest ul tag like
<ul>
<li ng-repeat ="..">
<ul>
<li class='divider-vertical'></li>
<li class="{{mi.state}}"><a href="{{mi.target}}" ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>
</ul>
</li>
</ul>