[英]Angularjs: Multiple parent-child tabs, make tab active
在这里使用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/
任何人?
我调整了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>
我希望这是有道理的。 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.