ng-repeat in AngularJS not working when trying to output a multi-dimension array

Question

I have a simple array which i would want to output it on my list. The array of the first dimension of the array works when i called it, But the second one wasn't able to be detect. What have I done wrong here or have I missed anything? Below are my code:

Angular.js

angular.module( 'theme' , [
    ] ).controller('sideController' , function($scope){

        $scope.menuName = [
            {'name': 'Header' , 'element' : [
                {'id' : 'template1' , 'template': 'wp-content/themes/dynamictheme/img/template/template1.png'} 
            ]
        }];
    })
;

HTML

<div id="slideout" ng-app="theme"> 
    <div id="slideMenu" ng-controller='sideController'>
        <ul style="list-style-type: none;">

            <!--- Worked --->

            <li class="active" ng-repeat="menus in menuName">
                <h3><a class="menuItem" id="{{menus.name}}">{{menus.name}}</a></h3>
            </li>

            <!--- Didn't Work --->

            <li id="{{subMenu.id}}" class="draggable" ng-repeat="subMenu in menus.element">
                <img src="{{subMenu.template}}" width="200" />
            </li>
        </ul>
    </div>
</div>

akonsu · Accepted Answer · 2014-11-07 01:39:27Z

2

the sub-menus must be inside the outer ng-repeat (replaced with div for simplicity):

<div class="active" ng-repeat="menus in menuName">
  <h3><a class="menuItem" id="{{menus.name}}">{{menus.name}}</a></h3>
  <div id="{{subMenu.id}}" class="draggable" ng-repeat="subMenu in menus.element">
    <img src="{{subMenu.template}}" width="200" />
  </div>
</div>

otherwise, there is no menus identifier in scope.

answered Nov 7, 2014 at 1:39

akonsu

29.7k39 gold badges126 silver badges205 bronze badges

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

1 Comment

Gene Lim Over a year ago

It worked as you have stated, Yes, the menu was out of scope. It helps me. Thank you!

Collectives™ on Stack Overflow

ng-repeat in AngularJS not working when trying to output a multi-dimension array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related