如何在頁面加載時使用Angular設置活動狀態

Question

我的導航欄中有以下一組Bootstrap導航欄。正如你可以從我的Angular'ng-init'代碼中看到的，我將'dateState'設置爲'過去'加載頁面。我的問題是我的'過去事件'導航藥丸沒有在頁面加載時突出顯示。我必須明確點擊導航藥丸才能獲得他們的「主動」突出顯示。我將如何設置我在'ng-init'中設置的任何藥片，以便在頁面加載時顯示其活動狀態（有可能我將在未來將ng-init更改爲'未來'或'現場'，所以我不會'不想只是硬編碼'活躍'狀態）？

<ul class="nav nav-pills pull-right" ng-init="dateState='past'"> 
    <li><a href ng-click="dateState = 'live'">Live!</a></li> 
    <li><a href ng-click="dateState = 'past'">Past Events</a></li> 
    <li><a href ng-click="dateState = 'future'">Future Events</a></li> 
</ul> 

Answer 1

我能夠改變我上面的代碼以下，實現了我的目標是：

<ul class="nav nav-pills pull-right" ng-init="dateState='past'"> 
    <li><a href ng-click="dateState = 'live'" ng-class="{'activeDate': dateState=='live'}">Live!</a></li> 
    <li><a href ng-click="dateState = 'past'" ng-class="{'activeDate': dateState=='past'}">Past Events</a></li> 
    <li><a href ng-click="dateState = 'future'" ng-class="{'activeDate': dateState=='future'}">Future Events</a></li> 
</ul> 

該類現在每當一個「禮」項目是活動變成「activeDate」。我添加了以下非常基本的樣式來測試它：

a.activeDate { 
    background-color: white; 
}