javascript - How to highlight item on hover?

Question

I′m integrating a Google Maps in an AngularJS 1.0.7 website. I have a list of items with pictures. In the other hand each item is displayed with an infoWindow in the map. What I want to do is when the user move the mouse over the picture the map should highlight that specific item. I don′t know what is the "Angular way" to do this.

I attach a plunker as starting point: https://plnkr.co/edit/qgfMldJ53N0iKnlsguMF?p=preview

Some code (better see plunker):

<ul>
   <li ng-repeat="car in cars">
        {{car.id}}: {{car.price}} (please, highlight the infoWindow in map onmouseover)
      </li>
    </ul>

Answer 1

You can use ng-mouseover to flag the car to highlight

<ul>
   <li ng-repeat="car in cars" ng-mouseover="car.highlight = true">
      {{car.id}}: {{car.price}} (please, highlight the infoWindow in map onmouseover)
   </li>
</ul>

Then change the class on the div with ng-class:

var content = '<div id="iw" ng-click=showDetails() ng-class="{'highlight': car.highlight}">{{infoWindowText}} €</div>';

Define the css class highlight to highlight your div

Update

I updated your plunker to change ng-class attribute. Car id must be resolved before ng-class because it is not in the directive scope:

ng-class="{highlight: ' + cars[i].id + ' == selectedCar}"

If you want update the InfoWindow style, you need to retrieve the InfoWindow from the car when the car selected change. You can add a watch on selectedCar in you directive, get the infoWindow matching then edit the style with JQuery