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:
<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!
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:
<ul>
<li ng-repeat='option in menuOptions'>
{{option[Ø]}}
<ul>
<li ng-repeat='suboption in option[1]'>{{suboption}}</li>
</ul>
<li>
</ul>
If you don't know the names of your keys, you can use this format...
JSON
{
"aclType": "combined",
"active": 1,
"attributes": {
"a6f8f9fb89ac4b2b12121c4ec4fa5441/#": [
"pub",
"sub",
"get",
"post",
"delete"
],
"a5f8f9eb89ac4b2b12121c4ec4fa8670/#": [
"pub",
"sub",
"get",
"post",
"delete"
]
}
}
You can loop like this:
<h2>Account Permissions</h2>
<ul>
<li>
<p><strong>Active:</strong> {{ acl.active}}</p>
</li>
<li ng-repeat="(key, data) in acl.attributes">
<p><strong>{{ key }}</strong></p>
<ul>
<li ng-repeat="permission in data">{{ permission }}</li>
</ul>
</li>
</ul>
If you'd rather have an associative array, you can do it like this:
var menuOptions = [
["Page One", []],
["Page Two", []],
["Page Three", []],
["Page Four", "sub-pages" : ["Sub-Page 1", "Sub-Page 2", "Sub-Page 3"] ],
["Page Five", []]
];
And then loop through the child array like this:
<ul>
<li ng-repeat='option in menuOptions'>
{{option[Ø]}}
<ul>
<li ng-repeat='suboption in option.sub-pages'>{{suboption}}</li>
</ul>
<li>
</ul>