如何突出显示悬停的项目？ [英] How to highlight item on hover?

问题描述

我在一个AngularJS 1.0.7网站上集成了一个Google Maps。我有一个带图片的项目列表。另一方面，每个项目都在地图上显示infoWindow。我想要做的是当用户将鼠标移到图片上时，地图应该突出显示特定项目。我不知道什么是角度的方式来做到这一点。

我附加一个plunker作为出发点： https://plnkr.co/edit/qgfMldJ53N0iKnlsguMF?p=preview

一些代码（最好参见plunker）：

 < ul> 
< li ng-repeat =汽车中的汽车> 
 {{car.id}}：{{car.price}}（请在地图onmouseover中突出显示infoWindow）
< / li> 
< / ul> 
  

解决方案

您可以使用 ng-mouseover 将车标为高亮显示

 < UL> 
< li ng-repeat =car in carsng-mouseover =car.highlight = true> 
 {{car.id}}：{{car.price}}（请在地图onmouseover中突出显示infoWindow）
< / li> 
< / ul> 
  

然后用ng-class改变div的类：

  var content ='< div id =iwng-click = showDetails（）ng-class ={'highlight'：car.highlight}> ; {{infoWindowText}}€< / div>'; 
  

定义css类突出显示来突出显示您的div

更新

我更新了你的plunker 改变 ng-class 属性。 Car code必须在ng-class之前解析，因为它不在指令范围内：

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

如果您想更新InfoWindow风格，当汽车选择改变时，您需要从汽车中检索InfoWindow。您可以在您的指令中添加 selectedCar 手表，获取infoWindow匹配，然后使用JQuery编辑样式

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>

解决方案

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

这篇关于如何突出显示悬停的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！