如何在angularjs bootstrap选项卡上设置活动

时间:2013-11-11 21:46:21

标签: javascript angularjs twitter-bootstrap angular-ui

使用Angular Bootstrap UI显示带有静态内容的tabset(使用AngularUI bootstrap)。以下是说明我的问题http://plnkr.co/edit/n8Xp3GrAqlbNxZ7VrXR6?p=preview

的plunker链接

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

我尝试在选项卡上应用活动的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>

有什么想法解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

即使是一个老问题。我有一个相当类似的问题,并使用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>

Demo in Plunker

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