How to change the class using click and hovering

Question

View:

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

controller- app.js

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

Here i have added the active class while clicking.how can i add the hover class using mouseover and remover the class using mouse-leave.

Answer 1

As suggested above, use ng-class with ng-mouseover and ng-mouseleave:

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

This way, you'll have 3 event listener to a single variable (in a mutually exclusive way).

If you want to have both at the same time, use an array this way:

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