Angularjs – How to change the class on one div while hovering over another div with AngularJS

angularjsangularjs-directive

I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far http://jsfiddle.net/E8nM5/38/

HMTL

<div ng-controller="Ctrl" ng-app>
   <div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
   <br/>
   <div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

CSS

div.highlight {
    padding: 10px;
    background: red;
    color: white;
}

div.lowlight {
    padding: 10px;
    background: blue;
    color: white;
}

div.hover-div {
    padding: 10px;
    background: green;
    color: white;
}

function Ctrl($scope){
}

Any ideas?

Best Answer

Change my-class to myclass (i.e. the dash causes problem).

<div ng-controller="Ctrl" ng-app>
    <div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
    <br/>
    <div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>    
</div>

Updated: the reason my-class isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.

Related Solutions

Javascript – Can one AngularJS controller call another

There are multiple ways how to communicate between controllers.

The best one is probably sharing a service:

function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

Another way is emitting an event on scope:

function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

In both cases, you can communicate with any directive as well.

Javascript – How to set the value property in AngularJS’ ng-options

See ngOptions

ngOptions(optional) – {comprehension_expression=} – in one of the following forms:

For array data sources: label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr For object data sources: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

In your case, it should be

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Update

With the updates on AngularJS, it is now possible to set the actual value for the value attribute of select element with track by expression.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

How to remember this ugly stuff

To all the people who are having hard time to remember this syntax form: I agree this isn't the most easiest or beautiful syntax. This syntax is kind of an extended version of Python's list comprehensions and knowing that helps me to remember the syntax very easily. It's something like this:

Python code:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

This is actually the same syntax as the first one listed above. However, in <select> we usually need to differentiate between the actual value in code and the text shown (the label) in a <select> element.

Like, we need person.id in the code, but we don't want to show the id to the user; we want to show its name. Likewise, we're not interested in the person.name in the code. There comes the as keyword to label stuff. So it becomes like this:

person.id as person.name for person in people

Or, instead of person.id we could need the person instance/reference itself. See below:

person as person.name for person in people

For JavaScript objects, the same method applies as well. Just remember that the items in the object is deconstructed with (key, value) pairs.