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

在 Angular 我有这个:

$scope.active = "active";

但是我怎么能在点击时改变它，所以如果用户点击菜单一旦它会被激活，如果再次点击它就不会被激活？

Answer 1

好的，假设您有多个菜单项，并且您想根据点击切换类，

你可以创建一个数组在 Controller 中它将菜单项表示为，

$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() Controller 中的函数并将菜单项名称作为参数传递。

<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