如何在页面加载时默认选择或激活列表标签答案

【问题标题】：How to make list tag as selected or active by default on page load如何在页面加载时默认选择或激活列表标签
【发布时间】：2016-10-08 08:09:00
【问题描述】：

我正在使用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

【问题讨论】：

标签： javascript angularjs ui-sref

【解决方案1】：

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

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

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

更新

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

这是Plunker中的一个工作示例

【讨论】：

默认设置activeTab1为真。??你的意思是在控制器中设置它？
我不明白它在控制器中是如何工作的。能否提供代码示例？
我更新了我的答案并在 Plunker 中添加了一个工作示例。