如何在ng-click上设置活动类? [英] How to set active class on ng-click?

问题描述

我有这个:

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

但是我该如何在单击时更改此设置，以便如果用户单击菜单一次即可将其激活，如果再次单击将不处于激活状态?

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?

推荐答案

好吧，您有多个菜单项，并且想要根据单击来切换类，

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'];

分配默认选择的菜单项

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

创建一个函数来分配选定的菜单值，此函数将为$scope.activeMenu分配最后一个选定的菜单项.

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

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

以 HTML

循环遍历menuItems数组并创建菜单.

loop through the menuItems array and create the menu.

等于重复项.

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

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

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

这是演示

这是没有ng-repeat

这篇关于如何在ng-click上设置活动类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！