Angular.js：多个父子选项卡，使选项卡处于活动状态

Question

Using angularjs here:

I have 2 parent tabs and under each of these tabs there can be 1 or mulitple child tabs.

Code as below:

<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 created from json. Sample json as:

var tabsData = { 
    "master1": {
      "master1-child1": ["some-data1"], 
      "master1-child2": ["some-data2"]
    }, 
    "master2": {
         "master2-child1": ["some-data3"], 
         "master2-child2": ["some-data4"]
    }
 };

On the button click I want to highlight a particular tab both parent and the child tab but I am not able to do so.

So my parent tab will always be master1 and master2, its just the child tabs of these tabs would keep on changing and their name is not constant.

For setting my parent tab active I tried adding active=true as below but it did not work:

I also tried setting this in my controller as:

 $scope.tabsData.master2.active = true;

Not sure whats the correct way to do this. Secondly I am not even sure as how to proceed making my child tabs active.

Anyone for inputs please.

Here is the jsfiddle I created to demo:

  https://jsfiddle.net/hubod4a2/2/

Anyone?

Answer 1

I tweaked your JSON so it is easier to work with

$scope.tabsData = [{
    name: "master1",
    tabs: [{
        name: "master1-child1",
        content: "master1-child1-content"
      },
      {
        name: "master1-child2",
        content: "master1-child2-content"
      }
    ]
  }, {
    name: "master2",
    tabs: [{
        name: "master2-child1",
        content: "master2-child1-content"
      },
      {
        name: "master2-child2",
        content: "master2-child2-content"
      }
    ]
  }]

And, adjusted your tabset as follows. As you can see if you have a well structured JSON object, it is much easier to use it with ng-repeat.

<div ng-app="tabs" ng-controller="tabController">

  <tabset class="tabbable-line">
    <tab ng-repeat="tab in tabsData" heading="{{tab.name}}">
      <tabset class="tabbable-line">
        <tab class="tabbable-line" ng-repeat="ctab in tab.tabs" heading="{{ctab.name}}">
          {{ctab.content}}
        </tab>
      </tabset>
    </tab>
  </tabset>
  <button type="submit" class="btn btn-primary" ng-click="setData()">Submit</button>
</div>

I hope this make sense. Cheers