Chris Bier Chris Bier - 1 year ago 80
AngularJS Question

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

I am using Angular JS 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:

<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four
<li>Sub-Page 1</li>
<li>Sub-Page 2</li>
<li>Sub-Page 3</li>
<li>Page Five</li>

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.


Answer Source

If you turn your arraw into this:

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:

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