如何禁用/隱藏啓動模式內的選項卡？

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-點擊該標籤錨和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>