Javascript 在“上选择元素”；班次+；向上箭头“；

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

{{elem.text}

首先是工作流程

这是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>

此光标将是我选择的其他元素的轴心。我需要保存

initialCursor

以了解选择向下或向上时的行为

在

ng键下

上，我只是自己处理事件并设置一些锁

$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();
    }
  } 
}

让我们看一看

选择up

功能

我有两个行为需要实现

如果我在首次单击之前，并且我

选择up

，我需要向上选择下一个项目

如果我落后于初始单击，并且我

选择了up

，我需要取消选择最后选择的项目

希望有帮助

---

如果您不喜欢我的实现，您可以使用“tabindex”技巧来构建自己的实现。

顺便说一句，我定义了太多的变量，如果您不需要视图中的函数/变量，请使用“var=”。@bambi您尝试过我的解决方案吗？

$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();
    }
  } 
}

$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;
   }
}