如何使用单击和悬停更改类答案

【问题标题】：How to change the class using click and hovering如何使用单击和悬停更改类
【发布时间】：2016-12-28 15:09:59
【问题描述】：

查看：

<a ng-repeat="control in controls | filter:name" ng-href="#{{control.id}}" ng-click="restart(control.name)" ng-class="{active: control.name == selected}">{{control.name}}

控制器- app.js

$scope.restart = function (controlName) {
    $scope.selected = controlName;
}

在这里，我在单击时添加了活动类。如何使用鼠标悬停添加悬停类并使用鼠标离开删除类。

【问题讨论】：

使用ngMouseover和ngMouseleave
我用过..但我想在点击时添加活动类。我想在悬停时添加“悬停”类。

标签： angularjs mouseover ng-repeat angularjs-ng-click mouseleave

【解决方案1】：

使用 ng-class、ng-mouseover 和 ng-mouseleave：

<div ng-class='{"classtoadd": add, "active": click, "hover": hover}' ng-mouseover="add=true;" ng-mouseleave="add=false" ng-click="click = true" ng-mouseover="hover = true"></div>

感谢您的回复。我想在单击时添加“活动”类。我想在“悬停”时添加添加类“悬停”

【讨论】：

感谢您的回复。我想在单击时添加“活动”类。我想在“悬停”时添加添加类“悬停”

【解决方案2】：

如上所述，将 ng-class 与 ng-mouseover 和 ng-mouseleave 一起使用：

<div ng-class="class" ng-click="class='active'" ng-mouseover="class='hovering'" ng-mouseleave="class=''"></div>

这样，您将拥有 3 个事件侦听器到单个变量（以互斥方式）。

如果您想同时拥有两者，请以这种方式使用数组：

<div ng-class="[classClick, classHover]" ng-click="classClick='active'" ng-mouseover="classhover='hovering'" ng-mouseleave="classHover=''"></div>

【讨论】：