如果选项卡处于活动状态，则 Angular Bootstrap 隐藏外部 div答案

【问题标题】：Angular Bootstrap if tab is active, hide external div如果选项卡处于活动状态，则 Angular Bootstrap 隐藏外部 div
【发布时间】：2017-03-08 18:28:08
【问题描述】：

有没有办法检测特定选项卡是否处于活动状态，然后在活动时将 div 隐藏在所有选项卡之外？

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>

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

将ng-hide 用于您的功能，例如

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

工作plunker

【讨论】：

【解决方案2】：

你可以简单地使用activeForm的值，它存储了index(tab)的值

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

【讨论】：