angularjs 和 bootstrap 垂直嵌套选项卡使用 ajax 加载内容
angularjs with bootstrap vertical nested tab load the content using ajax
我使用 angularjs 和 bootstarp 创建了动态选项卡。它工作正常。
我还尝试在选项卡下动态创建子选项卡。它也工作正常。
现在我试图移动到下一个选项卡主选项卡并单击返回子选项卡,但它总是打开主选项卡而不是子选项卡。
我需要激活子标签
我该如何解决这个问题?
我在哪里弄错了代码?
我的代码
<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>  {{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>  {{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>
当前图片
但我预计
首先,创建一个显示确切问题的最低限度工作的 plunker 将极大地帮助我们为您提供帮助。
其次,您在 <tab-heading>
元素中嵌套了制表符,这几乎肯定不是您想要的。
我使用 angularjs 和 bootstarp 创建了动态选项卡。它工作正常。 我还尝试在选项卡下动态创建子选项卡。它也工作正常。 现在我试图移动到下一个选项卡主选项卡并单击返回子选项卡,但它总是打开主选项卡而不是子选项卡。 我需要激活子标签 我该如何解决这个问题?
我在哪里弄错了代码?
我的代码
<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>  {{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>  {{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>
当前图片
但我预计
首先,创建一个显示确切问题的最低限度工作的 plunker 将极大地帮助我们为您提供帮助。
其次,您在 <tab-heading>
元素中嵌套了制表符,这几乎肯定不是您想要的。