Question

我在模态中有一个标签窗格。每次打开模态我都希望第一个标签处于活动状态。我的问题是，如果我打开模态，转到第二个选项卡并关闭模态，下次打开此模式时，第二个选项卡设置为活动状态。如何在angularjs控制器中设置第一个始终处于活动状态的选项卡？

这是我的标签HTML代码：

<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>

由于

Answer 1

您可以在控制器中使用ng-click功能，就像这样..

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

演示：http://bootply.com/OIy8QN5VNz

Answer 2

＆＃13;

    <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');
});
}

＆＃13;

//不要忘记在控制器中注入$ timeout

Angularjs - 如何设置bootstrap选项卡活动

2 个答案: