以编程方式设置活动选项卡

以编程方式设置活动选项卡

本文介绍了Angular UI - 以编程方式设置活动选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在此代码中使用 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 - 以编程方式设置活动选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 08:42