CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Kishore Relangi
Kishore Relangi

Reputation: 2034

How to have two <li> tags for each repetition with Angularjs's ng-repeat

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>

Upvotes: 2

Views: 1254

Answers (3)

Kunal Kakkad
Kunal Kakkad

Reputation: 653

You can use ng-repeat-start directive :

<ul>
   <li class='divider-vertical' ng-repeat-start="airport in airports"></li>
   <li ng-repeat-end class="{{mi.state}}"><a href="{{mi.target}}"
       ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>        
</ul>

I hope it will be helpful too..!

Upvotes: 7

Fantin
Fantin

Reputation: 1

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>

Upvotes: 0

Ketan
Ketan

Reputation: 5891

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.

Upvotes: 1

Related Questions