UPDATE: added JSFiddle link
I am currently working on creating a dynamic menu or set of options that will be populated based on server requests. The data structure I am dealing with is as follows (some unnecessary data has been omitted):
{
"name" : "root",
"subOptions" : [{
"name" : "A",
"subOptions" : [{
"name" : "A1",
}, {
"name" : "B1",
}, {
"name" : "B3",
}, {
"name" : "B4",
}, {
"name" : "B5",
}
]
}, {
"name" : "B",
"subOptions" : []
}, {
"name" : "C",
"subOptions" : [{
"name" : "C1",
}, {
"name" : "C2",
}, {
"name" : "C3",
}
]
}
]
}
The challenge I am facing lies in the presentation of suboptions, which should appear below their respective parent element. I am using Bootstrap 3 grid system to define the layout of these elements dynamically based on screen size.
When an element like 'C' is clicked, its suboptions should be displayed directly below it. This behavior should be consistent for all parent elements and their respective suboptions, even when the grid layout changes responsively.
In my current implementation, I am utilizing Angular's ng-repeat directive to iterate over the options:
<div>
<div class="row">
<div ng-repeat="option in object.options">
<div class="container col-lg-4 col-md-4 col-sm-6 col-ms-8 col-xs-12">
<div ng-click="selectOption(option)">
<div class="name"><span>{{option.name}}</span></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-ms-4 col-xs-4" ng-repeat="option in activeOption.suboptions">
<button class="btn btn-lg" ng-click="selectSuboption(option)">{{ ::option.name }}</button>
</div>
</div>
</div>
</div>
Currently, the suboptions are always displayed at the bottom of the page, irrespective of their parent element. To address this issue, I have two main questions:
- Is there a way to achieve this dynamic display effect seamlessly?
- How can I manipulate the container to insert suboptions below their respective parent elements?
Apologies for the lengthy post, but I wanted to provide a comprehensive overview of my problem in hopes of finding a solution. For reference, here is a JSFiddle showcasing my current implementation: https://jsfiddle.net/w5xrjhmd/6/