Выбор элементов по «Shift + стрелка вверх»

0

У меня есть список элементов (каждый элемент - одна строка текста). Когда вы нажимаете на него, он меняет цвет. После того, как вы нажмете на какой-либо элемент, если вы нажмете "shift + arrow up" выше, элементы также будут выбраны. Как его реализовать? Я думал, что это может пойти так: сосредоточить внимание на конкретном элементе в функции ng-click, а затем в функции ng-keydown реализовать выбор других элементов. Но, похоже, это не работает.

<div ng-repeat="elem in listCtrl.availableElements" class="list-elem" ng-class="{ 'selected' : listCtrl.availableElements[$index].selected }" ng-click="listCtrl.listHandler($event, listCtrl.availableElements[$index])" ng-keydown="$event.shiftKey && ($event.which == 38 || $event.which == 40) && listCtrl.listHandler($event, listCtrl.availableElements[$index])">
    <div>
        {{elem.text}}
    </div>
</div>
Теги:

1 ответ

0

Сначала это рабочий плункер

Вот HTML

<div tabindex="{{$index}}" ng-keydown="moveCursor($event)" ng-repeat="elem in elements" ng-click="setCursor($index)">
    <span ng-class="{ 'selected' : elements[$index].selected }">{{$index}} : {{elem.text}}</span>
</div>

tabindex необходимо добавить, чтобы сосредоточиться на элементе.

На ng-click я просто устанавливаю курсор.

$scope.setCursor = function(index){
  var wasSelected = $scope.elements[index].selected;
  $scope.unselectAll();
  $scope.elements[index].selected = !wasSelected;
  $scope.cursor = index;
  $scope.initialCursor = index;
}  

Этот курсор будет моим стержнем для выбора других элементов. Мне нужно сохранить initialCursor чтобы знать, как вести себя при выборе вниз или вверх.

На ng-keydown я просто обрабатываю событие самостоятельно и устанавливаю некоторые блокировки.

$scope.moveCursor = function(event){
  if(event.shiftKey && event.which == 38){
    if($scope.cursor > 0){
      $scope.selectUp();
    }
  }else if(event.shiftKey && event.which == 40){
    if($scope.cursor < $scope.elements.length-1){
      $scope.selectDown();
    }
  } 
}

selectUp() и selectDown() довольно похожи:

$scope.selectDown = function(){
  //If the current cursor is ahead of the first click
   if($scope.cursor < $scope.initialCursor){
      $scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
      $scope.cursor += 1;
   }else{
      $scope.cursor += 1;
      $scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
   }
}

$scope.selectUp = function(){
    //If the current cursor is behind the first click
   if($scope.cursor > $scope.initialCursor){
      $scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
      $scope.cursor -= 1;
   }else{
      $scope.cursor -= 1;
      $scope.elements[$scope.cursor].selected = !$scope.elements[$scope.cursor].selected;
   }
}

Давайте посмотрим на функцию selectUp.

У меня есть два поведения для реализации.

Если я опережаю первоначальный клик и я selectUp мне нужно выбрать следующий элемент вверх.

Если я за начальным кликом и я selectUp мне нужно отменить выбор последнего выбранного элемента.

Надеюсь, это помогло.

Если вам не нравится моя реализация, вы можете просто использовать подсказку "tabindex", чтобы создать свой собственный.

  • 0
    Кстати, у меня слишком много переменных, просто используйте 'var =', если вам не нужна функция / переменная в вашем представлении.
  • 0
    @bambi ты пробовал мое решение?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню