如何在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>

这是DEMO

这是一个没有的DEMOng-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

Angular4：

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

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

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

Answer 4

如果您使用的是[ ui-router ],则无需编写任何内容,只需在标记中添加此ui-sref-active ="active-menu"属性即可在单击/导航后激活.