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

Question

我有 angular 代码，每周有多个不同的时间段。它们都在 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 class 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);
    }

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

Change the style of a single element within an ng-repeat

angularjs

typescript

angularjs-ng-repeat

mouseover

mouseleave