javascript - 如何在 angularjs 引导选项卡上设置为活动状态

Question

我正在使用 Angular Bootstrap UI 来显示带有静态内容的选项卡集（使用 AngularUI 引导程序）。这是说明我的问题的 plunker 链接http://plnkr.co/edit/n8Xp3GrAqlbNxZ7VrXR6?p=preview

问题是如果我想设置第一个选项卡不可见和第二个选项卡可见，它仍然显示第一个选项卡内容为活动状态。

我试图在选项卡上应用活动 css，但它不起作用：

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

有什么想法可以解决这个问题吗？

Answer 1

即使是一个老问题。我有一个非常相似的问题并用于ng-init设置active属性。

使用提供的代码：

<div ng-init="activeTab = true">
<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab active="activeTab">
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>
</div>

Plunker 中的演示

当然，可以在控制器中初始化而不是使用ng-init, 。activeTab