选项卡在角度引导 ui 中移动

Question

我是 angular bootstrap 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>

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

Answer 1

每次父标签更改时，您都可以将 active 模型设置为子标签索引。

DemoPlunkr

<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 的索引号与您的任何子标签相同，它将被选中。但是标签的索引应该是唯一的，因此我使用tabs.length + 1 使其唯一。现在，当用户更改时，我们可以使用选项卡的选择事件将$scope.activeSub 更改为第一个子选项卡索引。