CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
ajmajmajma
ajmajmajma

Reputation: 14216

Angular + bootstrap-ui, check if current tab is already active

I am hooking a function onto a tab click to call for some data from the server. I have it firing when I click that specific tab, however I would like it get rid of the instance of someone already being on that tab and clicking it - and the call to the server firing again (not needed). I am using angular + angular-bootstrap-ui.

So I tried to hook function on the tab itself to check if if is already active however it seems once the ng-click on it is fired, it has already been set to active. So no matter when i click it it will return active. I need some kind of way to check if i am already on that tab. Here's what I tried

   <tabset>
{{tabs.active}}
    <tab heading="Tree" >

    </tab>
    <tab heading="XML" active="tabs.active" ng-click="checkTab(tabs.active)">


    </tab>
</tabset>

and then in the controller

  $scope.checkTab = function(check){
        console.log(check);

       }

And so, no matter what, this will always return true because it seems the .active is set true before the click fires. Is there any way around this? Thanks!

Update : fiddle - https://jsfiddle.net/7ognp2nj/2/

Upvotes: 1

Views: 1198

Answers (1)

Viktar Tserashchuk
Viktar Tserashchuk

Reputation: 368

I would suggest using select instead of ng-click. Something like this:

    <tab heading="Tree" select="checkTab('tab 1 selected')">
       tab1
    </tab>
    <tab heading="XML" select="checkTab('tab 2 selected')">
       tab2
    </tab>

CheckTab will not be invoked when you click on the active tab. It runs when you click on an inactive tab. It will be executed once without clicking when the tabs are displayed the first time. But it looks like desired behavior.

Upvotes: 4

Related Questions