ブートストラップタブを無効にする

Question

私たちのページにはタブがあります。私たちがやっていることは、ページが最初に読み込まれたときにタブを無効にしてから、ボタンをクリックするだけでタブを有効にすることです。私は、私の見解では、タブを定義するときに「無効」クラスを追加しようとしました：

<ul class="nav nav-tabs"> 
           <li id="tbReady" role="presentation" class="disabled"><a data-toggle="tab" href="#ready" ng-click="tabClick('tbReady')">Ready to Submit</a></li> 
           <li id="tbAction" role="presentation" class="disabled"><a data-toggle="tab" href="#action" ng-click="tabClick('tbAction')">Action Required</a></li> 
          </ul> 

ページのロードは、彼らが無効になって表示された場合しかし、あなたは、彼らが再びアクティブになるタブをクリックしたとき。私は、誰かが私が間違っているのかを見ると、右方向に私を指すことができますしてくださいまた、定義からデータトグルを削除しようとしたし、その後tabClick機能にfalseを返すことを試みたが、それはまだ

$scope.tabClick = function (selTabName) { 

      if ($('#'+selTabName).hasClass('disabled')) { 
        return false; 
       } 


      if (selTabName == 'tbReady') { 
       listReadyRows($rootScope.caseFileId); 
      } else { 
       listActionRows($rootScope.caseFileId); 
      } 
      } 

が動作していません！

Answer 1

なぜあなたはanglejsのためにtwitterブートストラップを使用していますか？ https://angular-ui.github.io/bootstrap/は、angularjsの（タブなど）のようなものをブートストラップするために使用されるモジュールです。

いつも動作しないanglejsでtwitterブートストラップを使用しているときに、これをお勧めします。

角度ブートストラップAngular-ui-bootstrap -- unable to disable tabs inside ng-repeatを使用すると、タブを無効にするのに役立ちます。ボタンをクリックしたときに、ページのロード

$scope.Cssclass="enable"; 

上

Answer 2

$scope.tabClick = function (selTabName) { 

     if ($('#'+selTabName).hasClass('disabled')) { 
       return false; 
      } 


     if (selTabName == 'tbReady') { 
      $scope.Cssclass="Disabled"; 
     } else { 
      $scope.Cssclass="enable"; 
     } 
     } 

あなたは

<li id="tbReady" role="presentation" class="{{Cssclass}}"><a data-toggle="tab" href="#ready" ng-click="tabClick()">Ready to Submit</a></li> 

をHTMLで、私はそれが動作すると思います。