如何在不單擊角的情況下標記多個元素？

Question

我有以下代碼：

<table>
  <tr ng-repeat="minute in hour.minutes track by $index">
    <td class="{{minute.class}}" ng-mousedown="setTdCol(hour, minute)" >&nbsp;</td>
  </tr>
</table>

setTdCol只是更改minute.class導致單元格更改其背景顏色。

我的目標是允許用戶通過按一次鼠標按鈕然后在單元格上方移動來標記多個單元格。

這就是為什么我使用ng-mousedown而不是ng-click ，但是我仍然必須釋放鼠標並單擊每一列。 必須更改什么？

Answer 1

嘗試與ng-mouseover和ng-mouseup一起構建邏輯。

例如，您可以使用ng-mousedown將布爾變量mouseDown設置為true，並使用ng-mouseup將其設置為false。 通過這種方式，您可以在ng-mouseover函數中檢查鼠標是向下還是向上，並標記鼠標經過的元素。 例如，您可以將它們存儲在一個數組中，如果元素在懸停時存在於該數組中，則將其刪除。 或者使用boolean ...等將它們設置為active / inactive。

希望對您有幫助:)

Answer 2

您想知道何時將鼠標放在桌子上以及何時放在桌子上，鼠標懸停在上面的分鍾數。 您可以設置一個標志來指示鼠標是否在桌子上，這將在調用表的ng-mouseup和ng-mousedown時發生變化，並為每個單元格提供ng-mouseover函數，以檢查此標志是否為true。

<table ng-mousedown="isDown = true" ng-mouseup="isDown = false">
  <tr ng-repeat="minute in hour.minutes track by $index">
    <td ng-style="minute.class" ng-mouseover='setTdCol(hour, minute)'>aaa</td>
  </tr>
</table>

在上面的示例中，isDown是標志。 現在，您只需要將setTdCol函數包裝在if檢查down是否為true的if中。 只是不要忘記在控制器中初始化$ scope.isDown

...
$scope.isDown = false;
  $scope.setTdCol = function(hour, minute) {
    if($scope.isDown) {
      ...
    }
  };
...