Question

我有两个指令：wa-hotspots＆amp; wa-tooltips。
在ng-mouseover wa-hotspots wa-hotspot wa-tooltip {$ 1}}，ng-class:on ng-style="tooltipCoords" wa-hotspots和wa-tooltips page.hotspots通过匹配索引。
注意：自ng-repeat＆amp; wa-hotspots共享同一个集合ng-style，因此他们通过wa-tooltips

问题： 当您将鼠标悬停在wa-tooltips上时，会将wa-hotspots位置设置为<ul id="wa-page-{{page.pageindex}}" class="wa-page-inner" ng-mouseleave="pageLeave()"> <li wa-hotspots <map name="wa-page-hotspot-{{page.pageindex}}"> <area ng-repeat="hotspot in page.hotspots" class="page-hotspot" shape="{{hotspot.areashape}}" coords="{{hotspot.coordinatetag_scaled}}" ng-mouseover="showTooltip($index, hotspot.coordinatetag_scaled)" ng-mouseout="hideTooltip()"> </map> </li> <li class="tooltip-wrapper"> <ul class="tooltip"> <li wa-tooltips ng-repeat="hotspot in page.hotspots" ng-class="{on: hovered.index == $index}" ng-mouseover="hovered.active == true" ng-mouseout="hovered.active == false" ng-style="tooltipCoords" hotspot="hotspot"> </li> </ul> </li> </ul>中的所有元素。我只想要它设置正确的匹配索引。由于可视性是由ng-class控制的，这并不重要，但它似乎是可以避免的额外开销。

因此：

问题： 如何在{{1}}的鼠标悬停时确保我的ng样式没有样式化{{1}}？但是，只设置与适当的共享索引匹配的工具提示？

{{1}}

工具提示：

Answer 1

你需要按照你的情况制作每个项目 - hotspot.tooltipCoords然后按索引设置该变量。你可以在表达式函数内部进行检查。

继承人fiddle

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items" ng-style="isChecked($index)">
        name: {{item.name}}, {{item.title}}
        <input type="checkbox" ng-model="item.checked" /> 
   </div>
</div>

...

$scope.isChecked = function($index){
    var color = $scope.items[$index].checked ? 'red' : 'blue';
    return {color:color};
}

Answer 2

而不是

ng-mouseover="hovered.active == true" 
ng-mouseout="hovered.active == false"

使用

ng-mouseover="hotspot.class== 'active'" 
ng-mouseout="hotspot.class== ''"

之后你可以在ng-class中使用hotspot.class，即：

ng-class="hotspot.class"

请参阅下面的演示：

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.items = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 3
  }, {
    id: 4
  }]

});

＆＃13;

.red {
  background-color: yellow;
}
p {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <p ng-repeat="i in items" ng-mouseover="i.class='red'" ng-class="i.class" ng-mouseout="i.class = ''">{{i.id}}</p>
  </div>
</div>

＆＃13;

Answer 3

使用以下

<div class="col-md-4 col-xs-12 col-lg-4" ng-repeat="obj in items"> 
<button type="button" class="btn btn-sm pull-right" ng-class="obj.class" ng-click="obj.class='test'" >

写一个新课程＆＃34; test＆＃34;。您可以在ngmouseover

中使用相同的内容，而不是点击

如何ng-style一个元素它是由ng-repeat创建的$ index？

3 个答案: