CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-interpolate
Christine268
Christine268

Reputation: 732

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

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.

Error in JavaScript Console: Error: [$parse:syntax] http://errors.angularjs.org/1.2.27/$parse/syntax?p0=x.count&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7Bx.count%7D%7DLinks&p4=x.count%7D%7DLinks at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:6:450 at gb.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:170:252) at gb.consume (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:171:181) at gb.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:179:45) at gb.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:169:385) at gb.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:176:73) at gb.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:175:310) at gb.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:175:170) at gb.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:175:34) at gb.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:174:400) at gb.logicalAND (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:174:281) at gb.logicalOR (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:174:151) at gb.ternary (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:173:461) at gb.assignment (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:173:211)

Upvotes: 0

Views: 259

Answers (1)

Pavel Horal
Pavel Horal

Reputation: 18194

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.

Upvotes: 2

Related Questions