Add hover class on Angular JS

Question

I am trying to add a class when hovering the li element in the code below using Angular

 <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> <img src="assets/images/cola.png"> </a> </li> 

This is all the functionality of the page, so I may not have to add a new js file for js.

When a mouse is entered in li , it must have a new selected class. The code does not work on it, and I cannot understand why.

Here is an example of my fiddle code: https://jsfiddle.net/mjrmeffc/

Answer 1

Why do you need an extra file if you can write the logic in your angular app?

I assume that you are using ng-app and have a so-called javascript file where your logic is located, and you should include it here.

Here is an example of the correct way to add / remove a class.

 <div ng-app> <div class="italic" ng-class="{red: hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false"> Test 1 2 3. </div> </div> 

NB I found this in another stackoverflow question, please use google search first, I don't have enough reputation to mark your question or make a comment.

* EDIT *

It looks like you are not familiar with AngularJS yet. You need to add your "app.js" or "script.js", whatever you call. There you define your application using

 var app = angular.module('yourappname', [/* add your dependencies here*/]); //Other logic like controllers or services 

And your HTML should be

 <div ng-app="yourappname"> <div ng-controller="yourController"> 

PLEASE ORDER YOURSELF THE FIRST BEFORE YOU START QUESTIONS OF QUESTIONS

Answer 2

Try using ng-mouseover attr

 <li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}"> 

write the hoverIn() function in the script and set the value when you hover over

 $scope.hoverIn = function() { this.applyClass = "red"; } 

Working demo