2
  • 我有 2 个指令：wa-hotspots& wa-tooltips。
  • ng-mouseover其中一个wa-hotspots采用 $index并 通过匹配索引设置通孔wa-hotspot的可见性和位置。wa-tooltipng-class:onng-style="tooltipCoords"
  • 注意：由于wa-hotspots&wa-tooltips共享相同的集合page.hotspots，因此它们通过共享相同的索引ng-repeat

问题： 当您将鼠标悬停在wa-hotspots它上面时，会将ng-style位置设置为wa-tooltips. 我只希望它设置正确的匹配索引。由于可见性由 ng-class 控制，这并不重要，但似乎这是可以避免的额外开销。

所以：

问题： 我怎样才能确保我的 ng-style 不是所有wa-tooltipson hover 的样式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>

工具提示：

4

3 回答 3

4

您需要像在您的情况下一样按项目进行设置-hotspot.tooltipCoords 然后按索引设置该变量。您可以在表达式函数中进行检查。

这是一个小提琴

<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};
}
于 2014-10-31T18:39:56.203 回答
1

Instead of 

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

use 

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

and after that you can use hotspot.class in ng-class ie:

ng-class="hotspot.class"

Please see demo below:

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.items = [{
    id: 1
  }, {
    id: 2
  }, {
    id: 3
  }, {
    id: 4
  }]

});
.red {
  background-color: yellow;
}
p {
  background-color: red;
}
<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>

于 2014-10-31T17:31:02.790 回答
-2

使用下面的一个

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

编写一个新类“测试”。而不是点击你可以使用相同的ngmouseover

于 2015-06-11T10:25:54.423 回答