Recognizing mouse and keyboard inputs within an Angular application when using ng-repeat

Question

Recognizing mouse and keyboard inputs within an Angular application when using ng-repeat

In my application, I am dynamically generating a series of spans using ng-repeat, with each span having a unique id (e.g. span-{{$index}}). Now, I am looking to implement the following functionality:

When clicking on a span, I want to copy the id of that span, which I have achieved through ng-click.
I aim to enhance this feature by detecting multiple clicks in order to create an array of selected ids, but only if the CTRL key is pressed during those clicks.

For example, if I hold down the CTRL key while selecting spans with ids 1, 3, 5, and 7, the resulting array should be [1, 3, 5, 7]. However, if CTRL is not held down, then only the last selected span's id should be captured (i.e. [7]).

Is it possible to bind events relatively? For instance, if I select span with id 1 and press CTRL+DOWN_ARROW, id 2 should also be selected, followed by id 3 upon subsequent presses of DOWN_ARROW.

The closest reference I can find to this type of user experience is in Gmail when composing a new email and selecting contacts. It allows for various keyboard and mouse combinations for selection, much like what I am trying to achieve here.

I am experimenting with different UX techniques but need guidance on how to implement this in Angular specifically.

javascript angularjs angularjs-directive angularjs-ng-repeat

Answer 1

Answer №1

To find the answer to your initial query, refer to the plunkr provided below.

If you include $event in your ng-click function, you can retrieve the event in your controller. In my demonstration, I verified if altKey was true, indicating whether the alt key was pressed simultaneously with the click. Additionally, ctrlKey, shiftKey, and the specific mouse button pressed are accessible. Refer to the MouseEvent object documentation here - http://www.w3schools.com/jsref/dom_obj_event.asp

The controller setup is as follows:

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

If the logic starts getting more intricate, employing a directive would be advisable.

For addressing the second question, foundational components are exhibited in the proceeding example:

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

We are monitoring key presses on the document and rechecking for altKey. Subsequently, if the keyCode corresponds to our defined hotkeys, we forward a signal to $rootScope using $rootScope.$broadcast(), which the controller listens to via $rootScope.$on().

In this scenario, pressing alt+s will append additional ids, whereas alt+a will reduce them back to the initially selected one.

Answer 2

To find the answer to your initial query, refer to the plunkr provided below.

If you include $event in your ng-click function, you can retrieve the event in your controller. In my demonstration, I verified if altKey was true, indicating whether the alt key was pressed simultaneously with the click. Additionally, ctrlKey, shiftKey, and the specific mouse button pressed are accessible. Refer to the MouseEvent object documentation here - http://www.w3schools.com/jsref/dom_obj_event.asp

The controller setup is as follows:

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

If the logic starts getting more intricate, employing a directive would be advisable.

For addressing the second question, foundational components are exhibited in the proceeding example:

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

We are monitoring key presses on the document and rechecking for altKey. Subsequently, if the keyCode corresponds to our defined hotkeys, we forward a signal to $rootScope using $rootScope.$broadcast(), which the controller listens to via $rootScope.$on().

In this scenario, pressing alt+s will append additional ids, whereas alt+a will reduce them back to the initially selected one.

Answer 3

Answer №2

If you're looking to capture meta key information in Angular, consider using a custom directive. Take a look at this example showcasing how you can achieve this and access the data within an Angular Controller (Plnkr):

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="main">
    <h1>Hello {{person}}</h1>
    <p>Ctrl: |{{info.ctrl}}|</p>
    <keyboard info="info"></keyboard>
    <script>
      var app = angular.module('myapp', []);
      app.controller('main', function($scope){
        $scope.info = { ctrl: false };
        $scope.person = "Me";

      });

      app.directive('keyboard', function($timeout){
        return {
          scope: {
            info: '='
          },
          link: function(scope, element, attr){
            console.dir(scope.info);
            $(document).on('keydown', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
            $(document).on('keyup', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
          }
        }
      });
    </script>
  </body>

</html>

Answer 4

If you're looking to capture meta key information in Angular, consider using a custom directive. Take a look at this example showcasing how you can achieve this and access the data within an Angular Controller (Plnkr):

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="main">
    <h1>Hello {{person}}</h1>
    <p>Ctrl: |{{info.ctrl}}|</p>
    <keyboard info="info"></keyboard>
    <script>
      var app = angular.module('myapp', []);
      app.controller('main', function($scope){
        $scope.info = { ctrl: false };
        $scope.person = "Me";

      });

      app.directive('keyboard', function($timeout){
        return {
          scope: {
            info: '='
          },
          link: function(scope, element, attr){
            console.dir(scope.info);
            $(document).on('keydown', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
            $(document).on('keyup', function(e){
              $timeout(function(){
                scope.info.ctrl = e.ctrlKey;
              });
            });
          }
        }
      });
    </script>
  </body>

</html>

Recognizing mouse and keyboard inputs within an Angular application when using ng-repeat

Answer №1

Answer №2

Similar questions

The JavaScript "sort()" method outlined in the Mozilla Documentation specifically created for the sorting of numbers

Alert message in jQuery validation for the chosen option value

Modifying the height of the bar in Google Charts Timeline using react-google-charts

Sending a variable to a VueJS component

What is the best way to utilize "exports" in package.json for TypeScript and nested submodules?

Using a template literal as a prop is causing rendering issues

Maintaining microsecond accuracy when transferring datetime values between Django and JavaScript

Problem with TypeScript involving parameter destructuring and null coalescing

Implement input validation in React by enhancing the functionality of HTML input tags

Redux state not reflecting changes until second click

.htaccess file is causing js and css files to not load

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

When using the jQuery ajax function to validate a form, it is important to note that the $_POST variables

The onChange event seems to be failing to activate during a jQuery / Ajax form submission

Adding wrapAll in jQuery or PHP after tags with identical IDs can be achieved by selecting all the target elements

Tips for creating a responsive carousel slider for images

Using jQuery and PHP to send a dynamic form through AJAX

"Learn the technique of adding a new data attribute before every element in a step-by-step

The background image causes the scrollbar to vanish

Guide to positioning a div in the center while implementing animations through transition and transformation using scale