使用静态内容在angularjs bootstrap选项卡上保持活动状态

Question

我正在使用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

- Nisar

---

我发现在你的 Plunker 中“下一个”和“上一个”按钮无法使用，是这样吗？还是只有我遇到了这个问题？ - Gurnard

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 时，第一个标签将被显示。

- Peter Elliott

---

更新我的问题..添加了Plunker http://plnkr.co/edit/kzg9ITOiubLuZwkw3TmY?p=preview - Nisar

不再使用旧的方法，现在需要设置 "uib-tabset" 元素的 "active" 属性为当前选项卡的索引。请参考 http://angular-ui.github.io/bootstrap/versioned-docs/1.3.1/。 - Gert-Jan

它在新版本中不再起作用了，对吧，但如果你必须使用过时的版本，那么这个答案真的很有用 -> +1 - Markus Pscheidt

@MarkusPscheidt，我认为没有任何有效的理由不始终使用最新稳定版本的UI Bootstrap！ - Force444

@DSF 在理想的世界中没有充分的理由 ;) 我们的更新有点落后了。。 - Markus Pscheidt

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。

- pikkvile