CODEWITHSUNDEEP
angularjstwitter-bootstraptabs
user1260928
user1260928

Reputation: 3429

Angulajrs - how to set bootstrap tab active

I have a tab pane in a modal. Each time I open the modal I want the first tab to be active. My problem is that if I open the modal, go to the second tab and close the modal, next time I open this modal the second tab is set to active. How can I set the first tab always active in my angularjs controller?

Here is my tab html code:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#saveClientModal">
        <span class="glyphicon glyphicon-flash"></span> open modal
</button>
 <div id="saveClientModal" class="modal fade" tabindex="-1"  data-backdrop="static" data-keyboard="false"  role="dialog">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <div class="tabbable"> <!-- Only required for left/right tabs -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="" data-target="#tab1" data-toggle="tab">Tab1</a></li>
                        <li><a href="" data-target="#tab2" data-toggle="tab">Tab2</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                        ...
                        </div>
                    </div>
                        <div class="tab-pane" id="tab2">
                        ...
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

Thanks

Upvotes: 0

Views: 2241

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362290

You could use a ng-click function in your controller like this..

  $scope.showFirstTab = function(){
    angular.element('[data-target="#tab1"]').tab('show');
  }

Demo: http://bootply.com/OIy8QN5VNz

Upvotes: 2

shiva prasad
shiva prasad

Reputation: 11

    <button class="btn btn-primary btn-lg" ng-click="showModal();">
        <span class="glyphicon glyphicon-flash"></span> open modal
</button>

$scope.showModal = function()
{
$('#saveClientModal .tabbable ul.nav li:first-child').click();
$timeout(function(){
$('#saveClientModal').modal('show');
});
}

//dont forget to inject $timeout in the controller

Upvotes: 1

Related Questions