Angular ng-repeat without html element

Question

I have problems with foreach, what I need to do with Angular.

Here is what I want to do:

<ul>
    <div ng-repeat="g in groups">
        <li ng-repeat="c in g.commands">{{c.text}}</li>
        <li class="divider"></li>
    </div>
</ul>

How can I do something similar, but in the correct HTML structure? (without <div>between <ul>and <li>)

I see only one solution:

• Replace <div>with <ul>and make many css rules to make it the way it does not exist.

In addition, I am using Angular 1.4.8.

Thanks!

Answer 1

. ng-repeat-start ng-repeat-end. <ul>, CSS, .

<ul ng-repeat-start="g in groups">
    <li ng-repeat="c in g.commands">{{c.text}}</li>
    <li ng-repeat-end class="divider"></li>
</ul>

http://codepen.io/jusopi/pen/KVZBLv

Answer 2

, groupedCommands, angular .

ng-repeat-start . ng-repeat-start ng-repeat-end, :

<ul>
   <li ng-repeat-start="c in groupedCommands">{{c.text}}</li>
   <li class="divider" ng-repeat-end></li>
</ul>

Answer 3

,

<ul>
    <!-- ng-repeat: g in groups -->
    <span ng-repeat="g in groups">
        <li ng-repeat="c in g.commands">{{c.text}}</li>
        <li class="divider"></li>
    </span>
</ul>

.

: <span> <ul> <li>.