ページの読み込み時にアクティブなタブのスタイルを変更する方法

Question

ブートストラップを使用してタブを作成しようとしています。ページの読み込み中は、アクティブなタブのスタイルは変更されません。個々のタブをクリックすると、スタイルが正しく変更されます。ページの読み込み時にのみ動作していません。

私はプランナーを作成し、リンクの下に与えました。

plunker =link

ページが最初のタブをロードしたときに私の要件は、（それがアクティブなタブで）異なるスタイルで表示されますされています。

ご協力いただきありがとうございます。

Answer 1

あなたはこれがあなたのためにusfulであることを述べてきたように、任意のクエリなら、私に知らせて：

http://jsfiddle.net/simonbingham/bFWUM/

(function() { 
 
    var app = angular.module('myApp', []); 
 

 
    app.controller('TabController', function() { 
 
     this.tab = 1; 
 

 
     this.setTab = function (tabId) { 
 
      this.tab = tabId; 
 
     }; 
 

 
     this.isSet = function (tabId) { 
 
      return this.tab === tabId; 
 
     }; 
 
    }); 
 
})();

<div class="container"> 
 
    <section ng-app="myApp" ng-controller="TabController as tab"> 
 
     <ul class="nav nav-pills"> 
 
      <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li> 
 
      <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li> 
 
      <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li> 
 
     </ul> 
 
     
 
     <div ng-show="tab.isSet(1)"> 
 
      <h4>Tab 1</h4> 
 
     </div> 
 
     <div ng-show="tab.isSet(2)"> 
 
      <h4>Tab 2</h4> 
 
     </div> 
 
     <div ng-show="tab.isSet(3)"> 
 
      <h4>Tab 3</h4> 
 
     </div> 
 
    </section> 
 
</div>