Using AngularJS to turn a multi-dimensional array into a multi level list

angularjs, javascript

Solution

If you turn your array into the following

var menuOptions = [
    ["Page One", []],
    ["Page Two", []],
    ["Page Three", []],
    ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ],
    ["Page Five", []]
];

You should be able to do this:

<ul>
  <li ng-repeat='option in menuOptions'>
    {{option[Ø]}}
    <ul>
      <li ng-repeat='suboption in option[1]'>{{suboption}}</li>
    </ul>
  <li>
</ul>

Problem

I am using AngularJS and trying to use ng-repeat or the like to take a multi-dimensional array and put it into the DOM as a mutli-level list. From This: ``` var menuOptions = [ ["Page One"], ["Page Two"], ["Page Three"], ["Page Four", ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ], ["Page Five"] ]; ``` To This: ``` <ul> <li>Page One</li> <li>Page Two</li> <li>Page Three</li> <li>Page Four <ul> <li>Sub-Page 1</li> <li>Sub-Page 2</li> <li>Sub-Page 3</li> </ul> </li> <li>Page Five</li> </ul> ``` I was unable to find anything in the Angular JS Documentation and a search of the web came to no avail. I am aware that I can handle something like this with plain 'ol Javascript, or PHP but I would like to utilize some Angular JS thing like ng-repeat. Any input is appreciated. Thanks!

Original source