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-控制器代码以编程方式更改当前活动标签。例如，select 选项卡“2”处于活动状态。

如何做到这一点？

Answer 1

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

<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： Working Plnkr

Answer 2

我遇到了同样的问题，这个帮我弄明白了。

我在范围内使用了两个变量：$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。

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

Angular UI - set active tab programmatically

angularjs

angular-ui

angular-ui-bootstrap

angular-ui-tabset