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>

当tabOneActive设置为true时，将显示第一个标签

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

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

2 个答案: