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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:18:40  来源:igfitidea点击:

Active on angularjs bootstrap tab with static content

javascriptangularjstwitter-bootstraptabs

提问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。

Plunker

普朗克

回答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。