如何使用单击和悬停更改 class

Question

查看：

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

我在这里添加了活动 class 而 clicking.how 我可以使用鼠标悬停添加悬停 class 并使用鼠标离开移除 class 吗？

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

感谢您的回复。我想添加 'active' class 而 clicking.and 我想添加 class' hover' while 'hovering'

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