javascript - 在 Angular 中检测鼠标+键盘事件以进行 ng-repeat

Question

我有一个应用程序，我在其中使用 ng-repeat 生成一组跨度，每个跨度都有一个唯一的 ID(比方说 span-{{$index}})。现在我想执行以下操作:

• 如果我单击一个跨度，我希望复制该跨度的 ID。我设法通过 ng-click 做到了这一点。
• 我想进一步扩展此功能以检测多次点击，以获取所选 ID 的数组，但仅如果在点击期间按住 CTRL 键.

例如。如果我在选择 id 为 1,3,5,7 的跨度时单击了 ctrl 按钮，我的数组应该有 [1,3,5,7] ，但如果我没有按下 CTRL 键，那么我应该只有 [7]，因为它是最后选择的跨度。

还有，我可以绑定(bind)相关事件吗？例如。如果我选择 id 为 1 的跨度，如果我单击 CTRL+DOWN_ARROW，id 2 也会被选中...然后是 id 3 等等，直到我一直按 DOWN_ARROW.

我想我见过的最接近此类用户体验的是在撰写新邮件时在 Gmail 中选择联系人。我可以使用各种键盘和鼠标组合来选择联系人。我正在寻找非常相似的东西

我正在尝试不同的 UX 技术，但我一直在思考如何使用 angular 来做到这一点。

Answer 1

对于您的第一个问题，请参阅下面的 plunkr。

如果将 $event 传递给 ng-click 函数，则可以在 Controller 中访问该事件。在我的示例中，我检查了 altKey 是否为真，即检查是否在单击的同时按下了 alt 键。您还可以访问 ctrlKey、shiftKey 和按下的鼠标按钮。请在此处查看 MouseEvent 对象 - http://www.w3schools.com/jsref/dom_obj_event.asp

Controller :

angular.module('exampleApp', [])

.controller("ItemCtrl", function($scope){

    $scope.items = [
      {text: "Bob", id: 1},
      {text: "Alice", id: 2},
      {text: "Frank", id: 3},
      {text: "Lisa", id: 4}
    ];
    $scope.itemList = [];

    $scope.addItemIdToList = function(event, item){
        if(event.altKey){
          if(isItemInList(item)){
            removeItemIdFromList(item);
          } else {
            addItemIdToList(item);
          }
        } else {
          addItemIdAsSingleSelection(item);
        }
    };

    var isItemInList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      return indexOfItem > -1;
    }

    var removeItemIdFromList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      $scope.itemList.splice(indexOfItem, 1);
    };

    var addItemIdToList = function(item){
      $scope.itemList.push(item.id);
    };

    var addItemIdAsSingleSelection = function(item){
      $scope.itemList = [item.id];
    };
})

http://plnkr.co/edit/RAX5oxkTomXxryp0sNNc

当逻辑开始变得有点复杂时，最好在指令中执行此类操作。

对于第二题，基本部分可以看下面的例子:

angular.module('exampleApp', [])

.directive('keypressEvents', function ($document, $rootScope) {
    return {
        restrict: 'E',
        link: function () {
            console.log('linked');
            $document.on('keypress', function(e) {
                if(e.altKey){
                    var s = 223;
                    var a = 229;
                    if(e.which == s){
                      $rootScope.$broadcast("add_next_id");
                    } else if(e.which == a){
                      $rootScope.$broadcast("remove_last_id");
                    }
                }
            })
        }
    }
})

.controller("ItemCtrl", function($scope, $rootScope){

      $scope.items = [
      {text: "Bob", id: 1},
      {text: "Alice", id: 2},
      {text: "Frank", id: 3},
      {text: "Lisa", id: 4}
    ];

    $scope.itemList = [1];

    $rootScope.$on('add_next_id', function (evt, obj, key) {
        $scope.$apply(function () {
            addNextId();
        });
    });

    $rootScope.$on('remove_last_id', function (evt, obj, key) {
        $scope.$apply(function () {
            removeLastId();
        });
    });

    var addNextId = function(){
        var lastId = $scope.itemList[$scope.itemList.length - 1];
        if(lastId < $scope.items.length){
          $scope.itemList.push(lastId+1); 
        }
    };

    var removeLastId = function(){
        if($scope.itemList.length > 1){
          $scope.itemList.pop();
        }
    };

     $scope.isItemInList = function(item){
      var indexOfItem = $scope.itemList.indexOf(item.id);
      return indexOfItem > -1;
    }
})

http://plnkr.co/edit/PyyjfRMovygeq9qNbzWo

我们在文档中监听按键并再次检查 altKey。然后如果 keyCode 是我们的热键之一，我们使用 $rootScope.$broadcast() 向 $rootScope 发送一条消息， Controller 正在使用 $rootScope.$on() 方法监听该消息。

在上面的示例中，alt+s 将添加更多 id，而 alt+a 将它们删除到最初选择的那个。