选项卡集中的活动属性无法正常工作

Question

默认情况下，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>

Answer 1

您可能有一些旧版本的 tabset。如documentation 中所述，active 属性位于uib-tabset 元素上。例如

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

看看这个plunker 你的例子。

Answer 2

看看这个plunkr

active 属性应添加到tabset 指令中。它的值应该是要显示的选项卡的索引。更多详情，请查看Angular UI Bootstrap - Tabs