简体   繁体   English

Angular Bootstrap(如果选项卡处于活动状态),则隐藏外部div

[英]Angular Bootstrap if tab is active, hide external div

Is there a way to detect if a specific tab is active and then hiding a div outside all tabs when it is active? 有没有一种方法可以检测特定选项卡是否处于活动状态,然后在其处于活动状态时将div隐藏在所有选项卡之外?

Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview Plunker: 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>

Use ng-hide to your functionality like 对您的功能使用ng-hide

<div class="border" ng-hide="activeForm==2">
    Hide me when Tab #3 is active.
</div>

Working plunker 工作

you can simply use the value of activeForm, which stores the value of the index(tab) 您可以简单地使用activeForm的值,该值存储index(tab)的值

<div class="border" ng-show="activeForm != 2" >
    Hide me when Tab #3 is active.
  </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM