Как пометить несколько элементов без щелчка мышью?

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.

Например, вы можете установить логическую переменную mouseDown в true с помощью ng-mousedown и установить ее в false с помощью ng-mouseup. Таким образом, в вашей функции ng-mouseover вы можете проверить, находится ли мышь вниз или вверх и пометить элементы, которые вы переходите. Например, вы можете хранить их в массиве и если элемент существует в этом массиве при наведении - удалите его. Или установите их активные/неактивный с булевым ... и т.д.

Надежда, что помогает :)

Answer 2

Вы хотите знать, когда мышь по столу и, когда она, что минуты его парящим над , Вы можете установить флаг, указывающий, находится ли указатель мыши в таблице, которая будет меняться при вызове ng-mouseup и ng-mousedown таблицы, и дать каждой ячейке функцию ng-mouseover, которая будет проверять, является ли этот флаг истинным.

<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. просто не забудьте инициализировать $ scope.isDown в контроллере

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