How to use ng-repeat to loop over inner contents of markup but not duplicate parent

Question

How can I loop over the children nodes of ul.items (eg. li.item) without duplicating ul.items every iteration.

Why?:

I cannot loop over ul.items because height of that box is height: 100% and I need that height to position the children nodes.

Also, I need the $index of the li.items in order.

<ul class="items" ng-repeat="(keyHotspots, valHotspots) in pageValue.hotspots">
    <li class="item" ng-if="areashape == 'rectangle'" ng-style="pageRatioRect"; 
                                    ">
            <ul class="item-attr">
                <li><a href="">see details</a>
                </li>
                <li><a href="">add to quicklist</a>
                </li>
                <li><a href="">share</a>
                </li>

            </ul>

        </li>
        <li class="item" ng-if="areashape == 'polygon'" ng-style="pageRatioPoly"; 
                                    ">
            <ul class="item-attr">
                <li><a href="">see details</a>
                </li>
                <li><a href="">add to quicklist</a>
                </li>
                <li><a href="">share</a>
                </li>

            </ul>

        </li>
</ul>

Answer 1

This is a common misunderstanding in the ngRepeat directive. You do not place this on the parent. You place it ON the item you want repeated - the

in this case. Just move it down one line.

Your case is slightly more complex because you're apparently emitting two back-to-back LI tags, and I'm not sure what you're trying to render here. It appears as though you're trying to emit different LI structures depending on the type of element being rendered from the data set. Is that true?

If you actually wanted to do that, a UL>LI structure is a little awkward because it looks like you would still want your ngIf at a different DOM level than the ngRepeat. So you would probably want the ngRepeat on the LI, and you'd add a DIV inside it for the ngIf options. (You should also look at ngSwitch.")

I'm asking the question rather than just assuming because you aren't actually changing the structure inside. The only difference between the two is your ngStyle. I don't know if you've run across this yet, but you can absolutely drive ngStyle based off parameters. You could do this without the ngIf at all:

<ul class="items">
  <li class="item" ng-repeat="(keyHotspots, valHotspots) in pageValue.hotspots"
      ng-if="areashape === 'rectangle' && pageRatioRect ||
           areashape === 'polygon' && pageRatioPoly">
    <ul class="item-attr">
      <li><a href="">see details</a></li>
      <li><a href="">add to quicklist</a></li>
      <li><a href="">share</a></li>
    </ul>
  </li>
</ul>

Note that you need a very recent version of AngularJS to support this - 1.3.x IIRC. But if this looks good to you, I would definitely take this opportunity to explore directives. You are right on the edge of having those be a big advantage for you because I can see that these are going to be some sort of "smart" object for display, and it'll be an advantage to be able to add things like click handlers to those action entries, etc. The advantage to that is you can also get more clever with what you're trying to achieve with that ngStyle.

Here is a Plunkr illustrating the concept using a Directive. IMO this is a much cleaner style that gives you a lot of flexibility as you enhance what these things do: http://plnkr.co/edit/Gl1igyTGffYuSaw9PbiD?p=preview