twitter-bootstrap 在具有静态内容的 angularjs 引导程序选项卡上处于活动状态
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33399223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Active on angularjs bootstrap tab with static content
提问by Nisar
I am using Angular Bootstrap UI to show a tabset with static content.
我正在使用 Angular Bootstrap UI 来显示带有静态内容的标签集。
I was frustrated by this because the UI Bootstrap Tab documentation only shows navigation to tabs created by binding with ng-repeat.
我对此感到沮丧,因为 UI Bootstrap Tab 文档只显示了通过绑定 ng-repeat 创建的选项卡的导航。
<uib-tabset>
<uib-tab heading="Basic Details">
<div role=" tabpanel" class="tab-pane active" id="basicDetails">
tab1
<button class="btn btn-success" ng-click="$parent.tabs[1].select()">Go to Tab 3</button>
</div>
</uib-tab>
<uib-tab heading="Basic Details">
<div role=" tabpanel" class="tab-pane active" id="basicDetails">
tab2
</div>
</uib-tab>
</uib-tabset>
I found some thing hear Stackoverflowbut this is not working with current version of Angular Bootstrap UI..
我发现有些东西可以听到Stackoverflow但这不适用于当前版本的 Angular Bootstrap UI。
回答by Peter Elliott
to set a tab as active, you need to set a boolean flag on your scope to "true" and associate it with the given tab's activeattribute. this would look like
要将选项卡设置为活动状态,您需要将范围上的布尔标志设置为“true”并将其与给定选项卡的active属性相关联。这看起来像
<uib-tabset>
<uib-tab heading="Basic Details" active="tabOneActive">
tab1
</uib-tab>
<uib-tab heading="Other Details" active="tabTwoActive">
tab2
</uib-tab>
</uib-tabset>
when tabOneActiveis set to true, the first tab will be shown
当tabOneActive设置为 true 时,将显示第一个选项卡
回答by pikkvile
I'm not sure this is the cleanest solution, but I ended up with manually switching tabs by click on headings:
我不确定这是最干净的解决方案,但我最终通过单击标题手动切换选项卡:
<uib-tabset>
<uib-tab heading="h1" active="h1Active" ng-click="h1Active=true">
... content 1
<uib-tab>
<uib-tab heading="h2" active="!h1Active" ng-click="h1Active=false">
... content 2
<uib-tab>
</uib-tabset>
I have just two tabs here, and one variale is enough to switch between. But in case of more tabs I guess you just have to implement little more complicated login on click. I mean, probably, set one to true and others to false.
我这里只有两个选项卡,一个变量就足以在它们之间切换。但是如果有更多选项卡,我想您只需要在单击时实现更复杂的登录即可。我的意思是,可能,将一个设置为 true,将其他设置为 false。

