Question

我的导航栏中有以下一组Bootstrap导航丸。正如你从我的Angular＆＃39; ng-init＆＃39;代码我设置＆＃39; dateState到＆＃39;过去＆＃39;在页面加载。我的问题是我过去的事件＆＃39;页面加载时不会突出显示导航丸。我必须明确点击导航丸才能让他们活跃起来＆＃39;突出。我如何设置我在“ng-init”中设置的任何药丸？在页面加载时也显示其活动状态（我很有可能将ng-init更改为未来＆＃39;或者未来的生活状态，所以我不知道＆＃39; ＃39;我想只是硬编码“活跃状态”？

<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”项目处于活动状态时，该类现在变为“activeDate”。我添加了以下非常基本的样式来测试它：

a.activeDate {
    background-color: white;
}

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

1 个答案: