CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-mobile
Shruti
Shruti

Reputation: 1574

how to slide when tab bar button click in angular?

I am using transition :"slide" when user click any tab button .it show that contend .I am able to implement in jQm here is fiddle http://jsfiddle.net/ezanker/o9foej5L/1/ I use same concept in angular and use same plugin(owlCarousel) .I am able to slide when user swipe left and right .But I need to slide left and right when user tab or click any button on tab bar . as given in above fiddle .

here is plunker http://plnkr.co/edit/M08sP4oEZLWr6HgGKAde?p=preview

<div class="btn-group btn-group-justified tab">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab1</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Tab3</button>
    </div>
</div>

I need to go tab2 content when user tab2 button or same in tab3 with sliding .

Upvotes: 0

Views: 624

Answers (1)

Nitesh Kumar Anand
Nitesh Kumar Anand

Reputation: 621

I do not know if you really needed to remap your scope but I have modified it to make it work here

Changing the link code in directive to following makes it work.

$(element).owlCarousel(scope.owlOptio);
  scope.goto = function(tab) {
    var owl = $(element).data('owlCarousel');
    console.log('tab is ', tab)
    owl.goTo(tab);
  };

Upvotes: 0

Related Questions