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

Question

我在下面的代码中使用AngularUI：

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

我想通过我的angular-controller代码以编程方式更改当前的活动标记。例如，选择选项卡"2“以激活。

如何做到这一点？

Answer 1

您需要在ui-tabset上使用active属性。然后，您需要在每个选项卡上都有索引，以便从外部上下文中工作。

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

请参阅此工作计划：Working Plnkr

Answer 2

我也有同样的问题，这个answer帮助我解决了这个问题。

我在作用域中使用了两个变量：$scope.showTabsInView和$scope.activeTabIndex。

默认值为：

$scope.showTabsInView = false;
$scope.activeTabIndex = 0;

首先，我加载了dynamic tabs，然后指定了activeTabIndex的值。然后，我将showTabsInView的值更改为true。

<uib-tabset ng-if="showTabsInView" active="activeTabIndex">
    <uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
</uib-tabset>

如果您的情况不是那么复杂，您可以简单地忽略dynamic tabs和$scope.showTabsInView。