Перемещение вкладок в угловой бутстрапе ui

Question

Я новичок в угловой бутстрапе ui. Здесь я использую два uib-tabset. Основываясь на изменении значения индекса тега главного меню, изменяется значение индекса тега подменю. Это мой code link [plnkr прилагается].

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

Вы можете заметить, что, когда я shitfing на вторую вкладку подменит Тег defaultly выбран в качестве второго подменят ТЭГИ же для третьего тега и так далее. Так что мне нужно, когда вы меняете второй или третий тег, тег подменю по умолчанию должен быть первым. LINK

Answer 1

Вы можете установить active модель на ваш подпозицию индекса каждый раз, когда родительская вкладка изменений.

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> 

Здесь вы можете увидеть, я назначу модель как activeSub к вашему ребенку закладках что означает, когда $scope.activeSub оказывает индексный номер такой же, как ваш любой ребенок tab, он будет выбран. Однако индекс вкладок должен быть уникальным, поэтому для этого я использовал tabs.length + 1, чтобы сделать его уникальным. Теперь, когда пользователь меняет, мы можем изменить $scope.activeSub, используя событие выбора вкладки для первого индекса дочерней вкладки.