Working with angularjs in this scenario:
I have 2 primary tabs and each of these tabs can contain one or multiple nested tabs.
The code snippet is as follows:
<tabset class="tabbable-line">
<tab ng-repeat="(key,value) in tabsData" heading="{{key}}">
<tabset class="tabbable-line">
<tab class="tabbable-line" ng-if="key=='master1'" ng-repeat="(k2,v2) in value" heading="{{k2}}">
<!--some data-->
</tab>
<tab class="tabbable-line" ng-if="key=='master2'" ng-repeat="(k2,v2) in value" heading="{{k2}}">
<!--some data-->
</tab>
</tabset>
</tab>
</tabset>
These tabs are dynamically generated from a JSON object. A sample JSON structure is provided below:
var tabsData = {
"master1": {
"master1-child1": ["some-data1"],
"master1-child2": ["some-data2"]
},
"master2": {
"master2-child1": ["some-data3"],
"master2-child2": ["some-data4"]
}
};
Upon clicking a button, I aim to highlight a specific parent tab along with its child tab, but facing difficulties achieving this functionality.
Hence, the parent tabs will always remain as 'master1' and 'master2', while the child tabs within them may vary and their names are not fixed.
I attempted setting the active property to true for the parent tab as shown below, yet it did not yield the desired outcome:
Similarly, I tried implementing this logic in my controller using the following code:
$scope.tabsData.master2.active = true;
However, I am uncertain about the correct approach to achieve this. Moreover, I am unsure about how to handle making the child tabs active as well.
If anyone has any insights or suggestions, they would be greatly appreciated.
For demonstration purposes, here is the jsfiddle I created:
https://jsfiddle.net/hubod4a2/2/
Any help is welcome!