标签在角度自举ui中移动

时间:2016-09-03 09:16:02

标签: javascript angularjs angular-ui-bootstrap 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

1 个答案:

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