Question

我有一些元素列表（每个元素是一行文本）。当您单击它时它会改变颜色。单击某个项目后，如果按“向上+向上箭头”，则也会选择项目。怎么实现呢？我认为它可以这样：将重点放在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>

Answer 1

首先是工作plunker

这是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我需要取消选择最后一项。

希望它有所帮助。

如果您不喜欢我的实施，您可以使用＆＃34; tabindex＆＃34;小心建立自己的。

选择“shift + arrow up”

1 个答案: