Question

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

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

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

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

1 个答案: