CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
Akshay
Akshay

Reputation: 31

Active property in tabset not working properly

By default the active property of tabset is blank(null) and when we set its property to true it is switched automatically. But when we are setting it to null again and then again setting it to true it is not getting switched. I have even displayed the active value in a <p> tag. 

<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>

Upvotes: 0

Views: 4792

Answers (2)

T.Gounelle
T.Gounelle

Reputation: 6033

You may have some old version of tabset. As described in the documentation the active attribute is on the uib-tabset element. 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>

See this plunker with your example.

Upvotes: 1

Haris
Haris

Reputation: 767

Check out this plunkr

The active attribute should be added to the tabset directive. Its value should be the index of the tab to display. For more details, check out Angular UI Bootstrap - Tabs

Upvotes: 0

Related Questions