javascript - 在具有静态内容的 angularjs bootstrap 选项卡上处于事件状态

Question

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

我对此感到沮丧，因为 UI Bootstrap Tab 文档仅显示导航到通过绑定(bind) 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

Answer 1

要将选项卡设置为事件状态，您需要在范围内将 bool 标志设置为“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 时，将显示第一个选项卡