bootstrap
bootstrap copied to clipboard
Tabs: uib-tab index values are not correct when using ng-if on some tab elements
Bug description:
If all uib-tab elements of a uib-tabset have an ng-if attribute except the last one, the last tab has the index 0 and is selected by default. It seems the uib-tab indexes are not based on their order but on the moment they appear in the DOM.
<uib-tabset active="0">
<uib-tab ng-if="true">
<uib-tab-heading>Tab 1</uib-tab-heading>
<p>Some Text 1</p>
</uib-tab>
<uib-tab ng-if="true">
<uib-tab-heading>Tab 2</uib-tab-heading>
<p>Some Text 2</p>
</uib-tab>
<uib-tab ng-if="true">
<uib-tab-heading>Tab 3</uib-tab-heading>
<p>Some Text 3</p>
</uib-tab>
<uib-tab>
<uib-tab-heading>Tab 4</uib-tab-heading>
<p>Some Text 4</p>
</uib-tab>
<uib-tab>
<uib-tab-heading>Tab 5</uib-tab-heading>
<p>Some Text 5</p>
</uib-tab>
</uib-tabset>
Tab 1 has index 2 Tab 2 has index 3 Tab 3 has index 4 Tab 4 has index 0 Tab 5 has index 1
(an ugly workaround is to put ng-if="true" statements on every uib-tab that do not need to be displayed depending on conditions)
Link to minimally-working plunker that reproduces the issue:
http://plnkr.co/edit/ReAMeHlVWoM5JNcFrWLT?p=preview
Version of Angular, UIBS, and Bootstrap
Angular: 1.4.10
UIBS: 2.1.3
Bootstrap: 2.3.1
Workaround works, but would be nice not to have to add otherwise needless logic.