Angular Bootstrap 如果选项卡处于活动状态,则隐藏外部 div
Angular Bootstrap if tab is active, hide external div
有没有办法检测特定选项卡是否处于活动状态,然后在它处于活动状态时将 div 隐藏在所有选项卡之外?
笨蛋:https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview
<div class="border">
Hide me when Tab #3 is active.
</div>
<hr>
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Tab #1">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab #2">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab #3">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
将 ng-hide
用于您的功能,例如
<div class="border" ng-hide="activeForm==2">
Hide me when Tab #3 is active.
</div>
工作plunker
你可以简单地使用activeForm的值,它存储索引(tab)的值
<div class="border" ng-show="activeForm != 2" >
Hide me when Tab #3 is active.
</div>
有没有办法检测特定选项卡是否处于活动状态,然后在它处于活动状态时将 div 隐藏在所有选项卡之外?
笨蛋:https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview
<div class="border">
Hide me when Tab #3 is active.
</div>
<hr>
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Tab #1">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab #2">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab #3">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
将 ng-hide
用于您的功能,例如
<div class="border" ng-hide="activeForm==2">
Hide me when Tab #3 is active.
</div>
工作plunker
你可以简单地使用activeForm的值,它存储索引(tab)的值
<div class="border" ng-show="activeForm != 2" >
Hide me when Tab #3 is active.
</div>