Angular JS issue with nested ng-repeat

Question

I have an array on object like this:

$scope.techniques = [
 {
  programmes : 'genie' , 
  documents :[
    {
     menuTag: 'Moments et Centroïdes',
     titre: "Moments et Centroïdes",
     contenu: "moment.html"
    }]
},
{
  programmes : 'test' , 
  documents :[
    {
     menuTag: 'test de test',
     titre: "test",
     contenu: "test.html"
    }]
}
];

I am trying to build my menu with nested ng-repeat and exemple found on stackoverflow are not working. Cant figure ou why.

Here is my html;

<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
    <span class="caret"></span>
</button>

   <ul  class="dropdown-menu">
          <li ng-repeat="doc in tech.documents"><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>

I can see the programmes but I cant see the documents inside programmes. What am I doing wrong?

missing <li> ? you would probably want to have ul outside and repeat the li — Steen
– Steen, Commented Mar 16, 2016 at 13:43
Oh... and you need to have the doc repeat inside the tech repeat — Steen
– Steen, Commented Mar 16, 2016 at 13:45

Jhon Mike · Accepted Answer · 2016-03-16 13:59:56Z

2

It's because you're trying to access "tech" outside of the first ng-repeat-scope. So it's not beeing nested.

<div ng-repeat="tech in techniques">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
       {{tech.programmes}}
       <span class="caret"></span>
    </button>
    <ul ng-repeat="doc in tech.documents" class="dropdown-menu">
        <li><a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
    </ul>
</div>

edited Mar 16, 2016 at 13:59

Jhon Mike

1058 bronze badges

answered Mar 16, 2016 at 13:46

aup

8107 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

utkarsh patel · Accepted Answer · 2016-03-16 13:58:18Z

1

Your two ng-repeats are not actually nested. In order to nest two ng-repeats, the second ng-repeat should be within the range of the first ng-repeat. You cannot access the 'tech' outside the button element. To make it work, wrap both button and ul inside a div, and define the first ng-repeat on the div instead of button.

answered Mar 16, 2016 at 13:58

utkarsh patel

115 bronze badges

Comments

kittylapraline · Accepted Answer · 2016-03-16 23:47:52Z

1

Because you are not under the iteration of $scope.techniques.

<button ng-repeat="tech in techniques" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{tech.programmes}}
    <span class="caret"></span>
</button>

<!-- tech does not existe anymore-->
<ul ng-repeat="doc in tech.documents" class="dropdown-menu">
    <a href="../{{doc.contenu}}" ng-cloak>{{doc.menuTag}}</a></li>
</ul>

edited Mar 16, 2016 at 23:47

kittylapraline

165 bronze badges

answered Mar 16, 2016 at 13:49

Rogerio Soares

1,61316 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular JS issue with nested ng-repeat

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related