Angular Bootstrap if tab is active, hide external div

Question

Is there a way to detect if a specific tab is active and then hiding a div outside all tabs when it is active?

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>

Lieutenant Dan · Accepted Answer · 2017-03-08 19:40:26Z

2

Use ng-hide to your functionality like

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

Working plunker

edited Mar 8, 2017 at 19:40

Lieutenant Dan

8,30928 gold badges99 silver badges220 bronze badges

answered Mar 8, 2017 at 18:35

Gaurav Kumar Singh

1,5703 gold badges11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bashayer · Accepted Answer · 2017-03-08 18:39:04Z

0

you can simply use the value of activeForm, which stores the value of the index(tab)

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

answered Mar 8, 2017 at 18:39

bashayer

162 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap if tab is active, hide external div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related