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屋！