Angular UI - 以编程方式设置活动选项卡 [英] Angular UI - set active tab programmatically

问题描述

我在此代码中使用 AngularUI:

I using AngularUI with this code:

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

我想从我的角度控制器代码中以编程方式更改当前活动标签.例如，选择标签2"作为活动.

I want to programmatically change the current active tag from my angular-controller code. For example, select tab "2" to be the active.

如何做到这一点?

推荐答案

您需要使用 ui-tabset 上的 active 属性.然后您需要在每个选项卡上都有索引才能从外部上下文工作.

You need to use the active property on ui-tabset. Then You need to have indexes on each tab to work from outside context.

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

看到这个工作plnkr:工作 Plnkr

See this working plnkr: Working Plnkr

这篇关于Angular UI - 以编程方式设置活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！