如何在ng-click中设置活动类?

I have this:

我有这个:

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

In angular i have this:

在角度上，我有

$scope.active = "active";

but how can i change this on click so if user click on menu once it would be active if again click it would be NOT active?

但是我怎么能在点击时改变这个如果用户点击菜单，它就会被激活如果再次点击，它就不会被激活?

5 个解决方案

#1

Ok say you have multiple menu items and you want to toggle the class according to click,

假设你有多个菜单项你想要根据点击来切换类，

you can create a array in the controller which represents the menu items as,

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

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

assign the default selected ,menu item

分配默认选择的菜单项

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

create a function to assign the selected Menu value, this function will assign the $scope.activeMenu a last selected menu item.

创建一个函数来分配选择的菜单值，这个函数将分配$作用域。activeMenu最后选定的菜单项。

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

in HTML

在HTML中

loop through the menuItems array and create the menu.

遍历menuItems数组并创建菜单。

in the ng-class check last clicked menu item is equal to item in the repeat.

在ng-class检查中，最后单击的菜单项等于重复的项。

if click on the menu then call setActive() function in the controller and pass the menu item name as an argument.

如果单击菜单，则调用控制器中的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>

here is the DEMO

这是演示

here is a DEMO without ng-repeat

这是一个没有ng-repeat的演示

#2

This is what you need.

这就是你需要的。

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

No other scripting. +1 if it helps.

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

#3

If you are using [ui-router] you not need to write anything just you have add this ui-sref-active="active-menu" property in your tag which you want to active after click/navigate.

如果您正在使用[ui-router]，那么您不需要编写任何内容，只需在您的标记中添加ui- sf -active="active-menu"属性，单击/导航后将其激活。

#4

For cleaner code try this:

要获得更清晰的代码，请尝试以下方法:

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

You can remove the onclick event SetActiveAccountHeading(this);.

可以删除onclick事件SetActiveAccountHeading(this);。

Here's the JsFiddle link.

You can view the result in the developer's console.

这是JsFiddle链接。您可以在开发人员的控制台中查看结果。

Hope it helps.

希望它可以帮助。

#5

Angular4:

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

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

Documentation: https://angular.io/api/router/RouterLinkActive

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

#1