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>

我希望这有道理。干杯

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

1 个答案: