Javascript 角度引导ui中的选项卡移动

我是新的角度引导用户界面。这里我使用了两个

uib选项卡集

。基于主菜单标记索引值的移动，子菜单标记索引值将发生变化。这是我的[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>

{{tab.content}}

---

您可以注意到，当我切换到第二个标签时，子菜单标签默认选择为第二个子菜单标签，第三个标签也是如此，以此类推。所以我需要的是，当更改为第二个或第三个标记时，默认的子菜单标记应该是第一个

每次父选项卡更改时，您都可以将您的

活动

模型设置为子选项卡索引

普朗克

{{tab.content}}

在这里，您可以看到我将模型分配为

activeSub

到您的子选项卡，这意味着无论何时

$scope.activeSub

的索引号与您的任何子选项卡相同，它都将被选中。但是选项卡的索引应该是唯一的，因此我使用了

tabs.length+1

使其唯一。现在，当用户更改时，我们可以使用选项卡的select事件将

$scope.activeSub

更改为第一个子选项卡索引

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