How to move to second tab on click of a button when using angularjs tab directive

Question

Hi I'm using angular tab directive.The link for JS fiddle is AngularJs Tab Directive .My Question is How can I move to second tab from first tab with click of a button?Thanks

 <tabs>
<pane title="First Tab">
  <button type="button" ng-click="moveToSecondTab()">Second Tab.</button>
</pane>
<pane title="Second Tab">
  <div>This is the content of the second tab.</div>
</pane>

Kiarakibble

The given link works, what's your problem? Create a fiddle with your exact problem. – Shilashilha

Yes, But If I have a button in first tab and I want to navigate to the second tab on button click .How can I achieve that? – Kiarakibble

Hi @Aniket.Here's my fiddle for the problem.I have added a controller for the same. Updated Fiddle – Kiarakibble

Answer 1

Instead of hardcoding the panes in your HTML file, fetch it from your controller. Something like

  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

Then from your HTML you can call the function to switch the active tab. Something like this :

$scope.moveToSecondTab = function () {
$scope.tabs[1].active = true;
};

However, it'll be better if instead of a function, you switch the active tab directly from the button.

Use something like this:

<button ng-click="tabs[1].active = true">Select second tab</button>.

Check here for reference.

Shilashilha

Thanks @Aniket.But I'm not using angular bootstrap tabs.I'm using them as directives.Can I use this functionality inside directives? – Kiarakibble

Answer 2

Trigger a click on the second tab. This works for me.

  <!--HTML-->
  <tab id="tabID" heading="Second Tab">

  ///JS
  $timeout(function(){
    angular.element('#tabID a').trigger('click');
  });

Monologue