更改 ng 重复中单个元素的样式

Question

我有角度代码，每周都有许多不同的时间段。它们都在 ng 重复内。我希望能够在鼠标悬停在某个时间段上时更改该时间段的颜色。使用我当前的代码，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>

在此处输入图像描述

Answer 1

对于您的 HTML，我会这样做：

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

这将对应于CSS类悬停样式。

现在，您的代码正在计算一个与 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);
}