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

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 动态打开和关闭 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>

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

已更新

由于语法

在 ng-class 中添加了 {}

这是 Plunker

中的一个工作示例

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

How to make list tag as selected or active by default on page load

javascript

angularjs

ui-sref