在具有静态内容的angularjs引导选项卡上激活

Question

我正在使用Angular Bootstrap UI来显示带有静态内容的tabset.

我对此感到沮丧,因为UI Bootstrap选项卡文档仅显示通过绑定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

要将选项卡设置为活动,您需要在范围上将布尔标志设置为"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 tabOneActive设置为true时,将显示第一个选项卡