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);
    }

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

2 个答案: