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

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>

这是演示

这是没有的演示ng-repeat