如何在頁面加載時更改活動選項卡的樣式

Question

我正在嘗試使用bootstrap創建選項卡。除了在頁面加載時設置一切，活動標籤的樣式不會改變。如果我們點擊單個選項卡，樣式會正確更改。只有在頁面加載時，它不工作。

我創建了一個plunker，並在鏈接下面給出。當頁面加載的第一個選項卡（即活動標籤）將在不同的風格來顯示

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>