如何使用 Angular 在页面加载时设置活动状态

Question

我的导航栏中有以下一组 Bootstrap 导航丸。正如您从我的 Angular 'ng-init' 代码中看到的那样，我在页面加载时将 'dateState 设置为 'past'。我的问题是我的 'Past Events' nav pill 在页面加载时没有突出显示。我必须明确单击导航丸才能获得 'active' 突出显示。我将如何设置我在 'ng-init' 中设置的任何药丸以在页面加载时也显示其活动状态（我有可能将 ng-init 更改为 'future' 或 'live'未来所以我不想硬编码 'active' 状态)?

<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>

现在只要 'li' 项处于活动状态，class 就会变为 'activeDate'。我添加了以下非常基本的样式来测试它：

a.activeDate {
    background-color: white;
}

如何使用 Angular 在页面加载时设置活动状态

How to set active state on page load with Angular

html

javascript

css

angularjs