My goal is to incorporate a $scope variable within an AngularJS controller that has the following structure:
$scope.hierarchy = {
name: 'bob',
selected: true,
children: [
{ name: 'frank' },
{
name: 'spike',
children: [
{ name: 'mike' },
{ name: 'ben' },
{ name: 'gloria' },
]
},
{
name: 'lisa',
selected: true,
children: [
{ name: 'bobby' },
{ name: 'carol' },
{ name: 'roger' },
]
},
]
}
The objective is to populate a template using this variable. The requirement is to display all items at one level in one box, with a new box for the children of the selected item (similar to OSX Finder's folder browsing).
Essentially, I aim to create an angular template that renders something like this:
+------+ +--------+ +-------+
| >bob | | frank | | bobby |
+------+ | spike | | carol |
| >lisa | | roger |
+--------+ +-------+
Although it may appear straightforward, I seem to be struggling with finding the solution. Any assistance would be greatly appreciated!