Angularjs - 如何设置引导选项卡处于活动状态答案

【问题标题】：Angulajrs - how to set bootstrap tab activeAngularjs - 如何设置引导选项卡处于活动状态
【发布时间】：2015-01-27 11:30:41
【问题描述】：

我在模式中有一个选项卡窗格。每次打开模式时，我都希望第一个选项卡处于活动状态。我的问题是，如果我打开模式，转到第二个选项卡并关闭模式，下次我打开此模式时，第二个选项卡将设置为活动状态。如何在我的 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>

谢谢

【问题讨论】：

添加 class=""menu-item-parent active"

标签： angularjs twitter-bootstrap tabs

【解决方案1】：

您可以像这样在控制器中使用ng-click 函数..

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：