How to mark multiple elements without clicking in angular?

Question

I have the following code:

<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 just changes minute.class causing the cell to change its background color.

My goal is to allow the user to mark multiple cells by pushing the mouse button once and then moving above the cells.

That is why I used ng-mousedown instead of ng-click , but still I have to release the mouse and click each column. What has to be changed?

Answer 1

Try to build your logic together with ng-mouseover and ng-mouseup .

For example you can set a boolean variable mouseDown to true with ng-mousedown and set it to false with ng-mouseup . That way in your ng-mouseover function you can check if the mouse is down or up and mark the elements you go over. You can for example store them in an array and if the element exists in that array on hover - remove it. Or set them to active / inactive with boolean ... etc.

Hope that helps you :)

Answer 2

You want to know when the mouse is down on the table and when it is, which minutes its hovering above. You can set a flag to indicate if the mouse is down on the table that will vary when the table's ng-mouseup and ng-mousedown are invoked, and give an ng-mouseover function to each cell that will check if this flag is 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>

In the example above, isDown is the flag. Now you just need to wrap setTdCol function in an if that checks if is down is true. just don't forget to initialize $scope.isDown in the controller

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