Using AngularJS to turn a multi-dimensional array into a multi level list
-
12-12-2019 - |
Question
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!
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>
OTHER TIPS
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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow