Angular.js：多個父子選項卡，使選項卡處於活動狀態

Question

在這里使用angularjs：

我有2個父標簽，在每個標簽下都可以有1個或多個子標簽。

代碼如下：

<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>

這些選項卡是從json創建的。 樣本json為：

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

在按鈕上單擊我要突出顯示父級和子級選項卡的特定選項卡，但我無法做到這一點。

因此，我的父選項卡將始終為master1和master2，僅這些選項卡的子選項卡將不斷更改，並且它們的名稱不是恆定的。

為了將父選項卡設置為活動狀態，我嘗試添加如下所示的active = true，但它不起作用：

我也嘗試在控制器中將此設置為：

 $scope.tabsData.master2.active = true;

不確定執行此操作的正確方法是什么。 其次，我什至不知道如何繼續激活我的子標簽。

任何人請輸入。

這是我創建的要演示的jsfiddle：

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

任何人？

Answer 1

我調整了JSON，以便更輕松地使用

$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"
      }
    ]
  }]

並且，如下調整標簽集。 如您所見，如果您具有結構良好的JSON對象，則將它與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>

我希望這是有道理的。 干杯