Question

我有这个：

<div class="account-item">
    <div class="account-heading" ng-class="active">
        <h4 class="account-title">
            <a href="#/Messages"  onclick="SetActiveAccountHeading(this);">
            7.    @Translate("SYSTEM_MESSAGES")</a>
        </h4>
    </div>
    </div>
    <div class="account-item">
       <div class="account-heading" ng-class="active">
           <h4 class="account-title">
              <a href="#/Info"  onclick="SetActiveAccountHeading(this);">
              7.    @Translate("SYSTEM_INFO")</a>
           </h4>
      </div>
   </div>

在角度我有这个：

$scope.active = "active";

但是我如何在点击时更改此内容，以便用户点击菜单一旦它处于活动状态，如果再次单击它将不活动？

Answer 1

好的说你有多个菜单项，你想根据点击切换课程，

您可以在控制器中创建一个数组，表示菜单项为

$scope.menuItems = ['Home', 'Contact', 'About', 'Other'];

指定默认选定的菜单项

$scope.activeMenu = $scope.menuItems[0];

创建一个分配所选菜单值的功能，此功能将为$scope.activeMenu分配最后选择的菜单项。

$scope.setActive = function(menuItem) { $scope.activeMenu = menuItem }
HTML
中的

循环遍历menuItems数组并创建菜单。
ng-class检查中的
最后点击的菜单项等于重复中的项目。

如果单击菜单，则在控制器中调用setActive()函数，并将菜单项名称作为参数传递。

<div class="account-item" ng-repeat='item in menuItems'> <div class="account-heading" ng-class="{active : activeMenu === item}"> <h4 class="account-title"> <a href="#/Messages" ng-click="setActive(item)"> {{ item }}</a> </h4> </div> </div>

这是DEMO

这是DEMO没有ng-repeat

Answer 2

这就是你需要的。

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active === true}" ng-click="active = !active">
    <h4 class="account-title">
        <a href="#/Messages">7.    @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>

没有其他脚本。如果它有帮助，请+1。

Answer 3

如果您使用[ ui-router ]，则无需编写任何内容，只需添加此 ui-sref-active =“active-menu”属性即可单击/导航后要激活的标记。

Answer 4

Angular4：

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

<a [routerLink]="['calendar']" routerLinkActive="active">

文档：https://angular.io/api/router/RouterLinkActive

Answer 5

要获得更干净的代码，请尝试以下方法：

<div class="account-item" ng-init="active = true">
  <div class="account-heading" ng-class="{'active': active}">
    <h4 class="account-title">
        <a href="#/Messages" ng-click="active = !active">7. @Translate("SYSTEM_MESSAGES")</a>
    </h4>
  </div>
</div>

您可以删除onclick事件 SetActiveAccountHeading（this）; 。

以下是JsFiddle link 。

您可以在开发人员控制台中查看结果。

希望它有所帮助。

如何在ng-click上设置活动类？

5 个答案: