tabset中的活动属性无法正常工作

时间:2016-12-12 09:18:57

标签: html angularjs twitter-bootstrap

默认情况下,tabset的active属性为空(null),当我们将其属性设置为true时,它会自动切换。但是当我们再次将其设置为null然后再将其设置为true时,它就不会被切换。我甚至在<p>标签中显示了有效值。

<pre>{{state_tab}}</pre>
<div class="ui-tab-container">
    <tabset>
        <tab heading="Region Wise" index="0" active="region_wise" ng-click="regionClicked()" style="border: 1px solid #e9e9e9;">
        </tab >
        <tab heading="Branch Wise" index="1" style="border: 1px solid #e9e9e9;" active="state_tab">
        </tab>
        <tab heading="City Wise" index="2" style="border: 1px solid #e9e9e9;" active="city_tab">
        </tab>
        <tab heading="Counter Wise" index="3" style="border: 1px solid #e9e9e9;" active="counter_tab">
        </tab>
    </tabset>
    <p>I am changing the value of state_tab to "" on the click of region tab</p>
</div>

2 个答案:

答案 0 :(得分:1)

您可能有一些旧版本的tabset。如documentation中所述,active元素位于uib-tabset元素上。 E.g。

<uib-tabset active="currentTabIndex">
    <uib-tab heading="Region Wise" index="0" classes="my-tab">Region content</uib-tab>
    <!-- other tabs here -->
</uib-tabset>

请参阅此示例plunker

答案 1 :(得分:0)

查看此plunkr

active属性应添加到tabset指令中。它的值应该是要显示的选项卡的索引。有关详细信息,请查看Angular UI Bootstrap - Tabs