Can I use an ng-repeat inside ng-repeat and mingle interpolates?

Question

I've found a couple of other questions of people trying to put ng-repeat inside ng-repeat and that seems doable. But to accomplish what I need to do, I think I also need to put an interpolate from the first ng-repeat into the second ng-repeat. For example:

Before:

<div class="mainDetails">
    <li ng-repeat="x in mainLinks" class="{{x.id}}"><a href="{{x.link}}"><img src = "{{x.icon}}" width = "15px" height = "15px">{{x.name}}</a></li>
</div>
<div class="secondDetails">
    <li ng-repeat="x in secondLinks"><a href="{{x.link}}"><img src = "{{x.icon}}" width = "15px" height = "15px">{{x.name}}</a>
    </li>
</div>
<div class="thirdDetails">
    <li ng-repeat="x in thirdLinks" class="{{x.id}}"><a href="{{x.link}}"><img src = "{{x.icon}}" width = "15px" height = "15px">{{x.name}}</a>
    </li>
</div>

That can get a little crazy especially because I have it actually go up to "eighteenth".

So this is what I thought of: After:

<div ng-repeat="x in numOfMaps" class="{{x.count}}Details">
    <li ng-repeat="y in {{x.count}}Links" class="{{y.id}}"><a href="{{y.link}}"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>
</div>

numOfMaps coming from:

$scope.numOfMaps=[{
        count:"main"
    },{
        count:"second"
    },{
        count:"third"
    }];

Then, as I have a need for more "Details" all I need to do is add a count and boom: it is also added to the HTML. I thought it was pretty clever anyway..

The area is just blank, doesn't show anything.

Pavel Horal · Accepted Answer · 2015-04-23T15:14:54.917

2

Not sure if I followed your question correctly, but this is what you can try:

<div ng-repeat="name in ['main', 'first', 'second']" class="{{name}}Details">
    <li ng-repeat="y in this[name + 'Links']" class="{{y.id}}">
        <a href="{{y.link}}">
            <img src="{{y.icon}}" width="15px" height="15px">
            {{y.name}}
        </a>
    </li>
</div>

Keyword this in template expressions resolves to the current scope. However this feature is AFAIK undocumented. So it might be better to put those arrays as controller properties and use controller as syntax.

edited Apr 23 '15 at 15:14

answered Apr 23 '15 at 15:07

Pavel Horal

17,782
3
65
89

1

I was able to keep x in numOfMaps, but what you changed it to does the same thing I am sure. Since that can get pretty long in the HTML I'll just keep it in an object. But the y in this[name + 'Links'] did the trick! – Christine268 Apr 23 '15 at 15:13

Can I use an ng-repeat inside ng-repeat and mingle interpolates?

1 Answers1