如何禁用/隐藏引导模式中的选项卡？答案

【问题标题】：How to disable/hide the tabs inside a bootstrap modal?如何禁用/隐藏引导模式中的选项卡？
【发布时间】：2017-08-28 14:44:35
【问题描述】：

我有一个引导模式，里面有标签。目前所有选项卡都显示。我需要隐藏/禁用选项卡，以便一次只显示一个活动选项卡。当我单击下一个和上一个按钮时，应该会执行选项卡的启用和禁用操作。请帮帮我

<div class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div role="tabpanel">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">first</a></li>
                    <li><a href="#tab2" data-toggle="tab">second</a></li>
                    <li><a href="#tab3" data-toggle="tab">third</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">First tab content</div>
                </div>
                <md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
                <md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
                <div class="tab-pane" id="tab2">Second tab content></div>
                <md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
                <md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： angularjs

【解决方案1】：

假设你的控制器是这样的：

angular.controller('TabController', ['$scope', function($scope) {

  $scope.tab = 1;

  this.changeTab = function(tab) {
    $scope.tab = tab;
  }

}]);

您可以将 ng-clicks 添加到选项卡锚点，并将 ng-if（或 ng-show/ng-hide，如果您愿意）添加到选项卡窗格，如下所示：

<div role="tabpanel"
     ng-controller="TabController as ctrl">
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#tab1" ng-click="ctrl.changeTab(1)">
      first
     </a>
  </li>
  <li>
    <a href="#tab2" ng-click="ctrl.changeTab(2)">
      second
    </a>
  </li>
  <li>
    <a href="#tab3" ng-click="ctrl.changeTab(3)">
      third
    </a>
  </li>
</ul>
</div>

<div class="tab-content">

  <div class="tab-pane active" 
       ng-if="tab === 1">
    First tab content
  </div>

  <div class="tab-pane active" 
       ng-if="tab === 2">
    Second tab content
  </div>

  <div class="tab-pane active" 
       ng-if="tab === 3">
    Third tab content
  </div>

</div>

【讨论】：