Question

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

我将一个plunker作为起点：https://plnkr.co/edit/qgfMldJ53N0iKnlsguMF?p=preview

一些代码（最好看看plunker）：

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

Answer 1

您可以使用ng-mouseover标记汽车以突出显示

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

然后使用ng-class更改div上的类：

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

定义css类highlight以突出显示您的div

<强>更新

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

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

如果要更新InfoWindow样式，则需要在选择的汽车更改时从汽车中检索InfoWindow。您可以在指令中的selectedCar上添加一个监视，获取infoWindow匹配，然后使用JQuery编辑该样式

如何在悬停时突出显示项目？

1 个答案: