如何在不单击角的情况下标记多个元素？

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