htoniv htoniv - 3 months ago 19
AngularJS Question

Tabs shifting in angular bootstrap ui

I am new to angular bootstrap ui. Here i am using two

uib-tabset
. Based on shifting the main menu tag index value the sub menu tag index value changing. This is my code link [plnkr attached].

<uib-tabset active="active">

<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
<uib-tabset active="active">
<uib-tab index="$index + 1" ng-repeat="tab in subtabs" heading="{{tab.title}}">
{{ tab.content }}
</uib-tab>
</uib-tabset>
</uib-tab>

</uib-tabset>


You can notice that when i am shitfing to second tab the submenu tag defaultly selected as second submenu tag and same for the third tag and so on. So what i need is when changing to second or third tag the default submenu tag should be first one. LINK

Answer

You can set your active model to your sub tab index everytime when parent tab changes.

Demo Plunkr

<uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}" select="activeSub = tabs.length">
  <uib-tabset active="activeSub">
    <uib-tab index="tabs.length + $index" ng-repeat="tab in subtabs" heading="{{tab.title}}">
      {{ tab.content }}
    </uib-tab>    
  </uib-tabset>
</uib-tab>

Here, you can see I assign model as activeSub to your child tabs which means whenever $scope.activeSub is having index number same as your any child tab, it will get selected. However index of tabs should be unique so for that I've used tabs.length + 1 to make it unique. Now when user change the we can change $scope.activeSub using select event of the tab to the first child tab index.