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

【问题标题】：How to set active state on page load with Angular如何使用 Angular 在页面加载时设置活动状态
【发布时间】：2023-03-15 21:24:01
【问题描述】：

我的导航栏中有以下一组 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>

【问题讨论】：

你不能在初始化时将高亮类添加到相关的a 吗？

标签： javascript html css angularjs

【解决方案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”项处于活动状态，该类就会变为“activeDate”。我添加了以下非常基本的样式来测试它：

a.activeDate {
    background-color: white;
}

【讨论】：