更改ng-repeat中单个元素的样式

Question

我有每周有多个不同时间段的角码。它们都在ng-repeat内。我希望能够在鼠标悬停在该项目上时更改时间段的颜色。用我现在的代码，颜色获得ng-repeat中每个项目的变化。

public onSegmentMouseOverLeave(changeSegmentColor : boolean) : void { 
 
     this.timeSegmentColor = changeSegmentColor; 
 
    }

 .time-segment-grid { 
 
      position: absolute; 
 
      top: 0; 
 
      margin-top: 2px; 
 
      height: 35px; 
 
      border-radius: 5px; 
 
      cursor: pointer; 
 
      z-index: 1; 
 
      #gradient > .vertical(#1b9dd0, #0080b5); 
 
     } 
 
     .time-segment-grid-onmove { 
 
      position: absolute; 
 
      top: 0; 
 
      margin-top: 2px; 
 
      height: 35px; 
 
      border-radius: 5px; 
 
      cursor: pointer; 
 
      z-index: 1; 
 
      #gradient > .vertical(#f442d7, #0080b5); 
 
     }

<div> 
 
<div ng-repeat="timeSegment in $ctrl.deal.deal_settings.dayparting.schedule[dayName] track by $index"> 
 

 
    <span ng-class="$ctrl.daypartingTimeSegments.timeSegmentColor ? 'time-segment-grid' : 'time-segment-grid-onmove' " 
 
     ng-style="$ctrl.daypartingTimeSegments.timeSegmentGridStyle(timeSegment)" 
 
     ng-mousedown="$ctrl.daypartingTimeSegments.onSegmentDragStart($event, dayName, $index, 'dragFullContent')" 
 
     ng-mouseover="$ctrl.daypartingTimeSegments.onSegmentMouseOverLeave(false)" 
 
     ng-mouseleave="$ctrl.daypartingTimeSegments.onSegmentMouseOverLeave(true)"> 
 
    </span> 
 
    </div> 
 
</div>

enter image description here

Answer 1

对于你的HTML，我会做：

ng-mouseover="mouseOverOn = true" 
ng-mouseleave="mouseOverOn = false" 
ng-class="{hoverstyle: mouseOverOn}" 

这将对应的CSS类hoverstyle。

现在，您的代码正在评估与ng-repeat内的元素无关的表达式，这就是为什么它们都是高亮显示的原因。

如果需要其他的表情，你可以添加到表达式：

ng-mouseover="mouseOverOn = true; $ctrl.daypartingTimeSegments.onSegmentMouseOverLeave(false)" 

Answer 2

为什么使用代码时CSS能够支持=（

.time-segment-grid { 
     position: absolute; 
     top: 0; 
     margin-top: 2px; 
     height: 35px; 
     border-radius: 5px; 
     cursor: pointer; 
     z-index: 1; 
     #gradient > .vertical(#1b9dd0, #0080b5); 
    } 
    .time-segment-grid:hover { 
     #gradient > .vertical(#f442d7, #0080b5); 
    }