如何对一个元素进行 ng 样式化，它是由 ng-repeat 创建的 $index？答案

【问题标题】：How to ng-style one element it's $index created by ng-repeat?如何对一个元素进行 ng 样式化，它是由 ng-repeat 创建的 $index？
【发布时间】：2015-06-11 19:40:08
【问题描述】：

我有 2 个指令：wa-hotspots & wa-tooltips。
在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-class 控制，这并不重要，但似乎这是可以避免的额外开销。

因此：

问题： 如何确保我的 ng-style 没有在 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>

工具提示：

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat directive ng-style

【解决方案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};
}

【讨论】：

【解决方案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"

请看下面的演示：

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>

【讨论】：

因此，虽然这可行，但问题在于应用 ng-style 而不是类。如何确保只有鼠标悬停影响 ng 样式。我将计算条形的位置，因此我需要一个有条件的 ng 样式标签。为努力而投票！

【解决方案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

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

【讨论】：