如何ng样式化一个元素，它$index由ng-repeat创建？

Question

• 我有两个指令：wa-hotspots&CCD_ 2
• 在wa-hotspots的ng-mouseover上，取wa-hotspot的$index，并通过匹配索引经由ng-class:on和ng-style="tooltipCoords"设置wa-tooltip的可见性和位置
• 注：由于wa-hotspots&wa-tooltips共享相同的集合page.hotspots，因此它们通过ng-repeat共享相同的索引

问题：将鼠标悬停在wa-hotspots上时，会将ng-style的位置设置为wa-tooltips中的所有元素。我只想让它设置正确的匹配索引。由于可见性是由ng类控制的，这并不重要，但似乎是可以避免的额外开销。

因此：

问题：我如何确保我的ng样式不会在wa-hotspots悬停时为所有wa-tooltips设置样式？但是，只设置与正确共享索引匹配的工具提示的样式？

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

工具提示：

Answer 1

您需要像在您的案例中那样按项目设置-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};
}

Answer 2

而不是

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

使用

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

然后你可以在ng类中使用hotspot.class ie:

ng-class="hotspot.class"

请参阅下面的演示：

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>

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

写一个新的类"测试"。您可以在ngmouseover 中使用相同的方法来代替单击