在具有静态内容的 angularjs 引导选项卡上处于活动状态答案

【问题标题】：Active on angularjs bootstrap tab with static content在具有静态内容的 angularjs 引导选项卡上处于活动状态
【发布时间】：2015-10-28 18:49:21
【问题描述】：

我正在使用 Angular Bootstrap UI 来显示带有静态内容的标签集。

我对此感到沮丧，因为 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>

我发现了一些东西听到 Stackoverflow 但这不适用于当前版本的 Angular Bootstrap UI..

Plunker

【问题讨论】：

我看到下一个和上一个按钮在您的 plunker 中不起作用。这是正确的还是只是我？

标签： javascript angularjs twitter-bootstrap tabs

【解决方案1】：

要将选项卡设置为活动状态，您需要将作用域上的布尔标志设置为“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>

tabOneActive 设置为 true 时，将显示第一个选项卡

【讨论】：

更新我的问题.. 添加 plunker plnkr.co/edit/kzg9ITOiubLuZwkw3TmY?p=preview
这不再有效，而是您必须将 uib-tabset 元素上的 active 属性设置为活动选项卡的索引。见angular-ui.github.io/bootstrap/versioned-docs/1.3.1
它不再适用于新版本，对，但如果你必须使用过时的版本，那么这个答案真的很有用 -> +1
@MarkusPscheidt，我认为没有正当理由不始终使用最新的稳定版 UI Bootstrap！
@DSF 在完美的世界中没有正当理由 ;) 我们的更新有点落后..

【解决方案2】：

我不确定这是最干净的解决方案，但我最终通过点击标题手动切换标签：

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

我这里只有两个选项卡，一个变量足以在它们之间切换。但如果有更多选项卡，我猜你只需要在点击时实现更复杂的登录。我的意思是，可能将一个设置为 true，将其他设置为 false。

【讨论】：