ブートストラップモーダル内のタブを無効/非表示にする方法はありますか？

Question

私はタブがあるブートストラップモーダルを持っています。現在、すべてのタブが表示されています。タブを非表示/無効にする必要があるので、アクティブなタブが1つだけ表示されます。次へと前のボタンをクリックすると、タブの有効化と無効化が行われます。あなたは、タブアンカーとNG-場合にNG-クリックを追加することができます

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

    $scope.tab = 1; 

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

}]); 

（またはNG：親切に私は

<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

のは、あなたのコントローラは、このようなものであるとしましょう助けます-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>