CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Sampath
Sampath

Reputation: 65860

Angular UI Tab's Select event is not working as expected

I'm using Angular UI Tabs as shown below.My issue here is the inner uib-tabset select event is being fired on load moment.In other words without clicking that tab (heading="sorry").Can you tell me how to sort out this issue?

Here is the Plunker.

 <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>

     <uib-tab heading="My issue">
        <uib-tabset type="pills">
            <uib-tab heading="sorry" select="alertMe()">

            </uib-tab>

        </uib-tabset>
     </uib-tab>

</uib-tabset>

Upvotes: 4

Views: 3057

Answers (1)

10100111001
10100111001

Reputation: 1832

You need to set the active attribute of the inner, nested uib-tabset to null. By default the first tab is always selected hence the alertMe function is executed.

<uib-tabset active="active">
  <uib-tab index="0" heading="Static title">Static content</uib-tab>
  <uib-tab index="3" select="alertMe()">
    <uib-tab-heading>
      <i class="glyphicon glyphicon-bell"></i> Alert!
    </uib-tab-heading>
    I've got an HTML heading, and a select callback. Pretty cool!
  </uib-tab>

  <uib-tab heading="My issue">
    <uib-tabset type="pills" active="null">
      <uib-tab heading="sorry" select="alertMe()">

      </uib-tab>

    </uib-tabset>
  </uib-tab>

</uib-tabset>

Working Plunker

OP's feedback : For me active="-1" worked.

Upvotes: 3

Related Questions