带有bootstrap垂直嵌套选项卡的angularjs使用ajax加载内容

时间:2015-11-06 06:29:17

标签: jquery angularjs twitter-bootstrap-3 angular-ui-bootstrap jquery-tabs

我使用带有bootstarp的angularjs创建了Dynamic Tab。它工作正常。 此外,我试图动态地在选项卡下创建子选项卡。它也工作正常。 现在我正在尝试移动到下一个选项卡主选项卡并单击返回子选项卡,但它始终打开主选项卡而不是子选项卡。 我需要子标签处于活动状态 我该如何解决这个问题?

我误认为我的代码?

我的代码

 <uib-tabset vertical="true" class="tabs-left">
    <uib-tab ng-repeat="tab in menuList" select="getContent(tab.menuid)" active="tab.active">
      <tab-heading>
        <i class="fa {{tab.Icon}}"> </i> &nbsp{{tab.Name}}     
        <uib-tab ng-repeat="submenu in tab.submenu" select="getSubContent(tab.menuid, submenu.menuid)" active="submenu.active">
          <tab-heading>
            <i class="fa {{submenu.Icon}}"> </i> &nbsp{{submenu.Name}} 

            <i class="glyphicon glyphicon-remove" ng-click="removeSubTab(tab, submenu.menuid)"></i>
          </tab-heading>
          <div class="col-xs-10" class="tab-content">
            <div ng-hide="!submenu.isLoaded">
              <div bind-unsafe-html="submenu.content"></div>
            </div>
            <div ng-hide="submenu.isLoaded"><h3>Loading...</h3></div>                 
          </div>
        </uib-tab>
      </tab-heading>
      <div class="col-xs-10" class="tab-content">
        <div ng-hide="!tab.isLoaded">
          <div bind-unsafe-html="tab.content"></div>
        </div>
        <div ng-hide="tab.isLoaded"><h3>Loading...</h3></div>            
      </div>
    </uib-tab>
  </uib-tabset>

当前Img

enter image description here

但我希望

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

首先,创建一个显示确切问题的最低限度工作的plunker极大地帮助我们协助你。

其次,你在<tab-heading>元素中嵌套标签,这几乎肯定不是你想要的。