javascript - 如何在页面加载时默认选择或激活列表标记

Question

我正在使用ui-sref-active="active"使选定的<li>标记处于事件状态，但我希望列表标记在三个列表标记中默认处于事件状态

<li ui-sref-active="active" class="item active"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

我希望第一个列表标签默认处于事件状态，然后当用户单击任何其他列表标签时，它应该停用并激活其他列表标签

我正在使用这个指令:http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Answer 1

您可以使用 ng-class 动态打开和关闭类“active”。

<li ui-sref-active="active" ng-class="{active: activeTab1}"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab2}"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab3}"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

在 Controller 中，您可以根据用户单击的列表标签打开和关闭 activeTab1、2 和 3。默认情况下，您可以将 activeTab1 设置为 true。

已更新

由于语法原因，在 ng-class 中添加了 {}

这是 Plunker 中的一个工作示例