onKeyUp onKeyDown move inside the div through the elements AngularJS

Question

I have a list, and I want to move through that list with keys up/down, but it also scrolls through my page. I thought by preventDefault on events, that would fix the problem, but does not.

Fiddle http://jsfiddle.net/mato75/wKJ26

<div ng-onkeyup="moveUp($event)" ng-onkeydown="moveDown($event)">
    <ul>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
    </ul>
</div>

scope.moveUp = function (event) {
   moveUp();
   event.preventDefault();
}


scope.moveDown = function (event) {
  moveDown();
  event.preventDefault();
}

Can you reproduce in a plunkr or fiddle, appears this should work. — shaunhusain, Mar 22 '14 at 20:01
This seems very close to the answer of this question: http://stackoverflow.com/questions/11264188/how-can-i-detect-onkeyup-in-angularjs — Sten Muchow, Mar 22 '14 at 20:43

score 0 · Answer 1 · answered Mar 22 '14 at 20:43

Okay figured it out, you had the word on in your reference to the keyup and keydown handlers, also you need a tabindex on the div so it can receive focus and the events can propagate from it http://plnkr.co/edit/dUSFZT2TfHIfY18GUDp0

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    <div ng-controller="MyCtrl">
      <div tabindex=1  ng-keyup="moveUp($event)" ng-keydown="moveDown($event)">
        <ul>
         <li>One
         </li>
         <li>Two</li>
         <li>Three</li>
        </ul>
      </div>
    </div>
    <div>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
      Stuff<br>
    </div>
  </body>

</html>

The JS

// Code goes here

angular.module("myApp", []).controller("MyCtrl", function($scope){
  $scope.moveUp = function (event) {
     event.preventDefault();
     console.log("move up")
  }
  $scope.moveDown = function (event) {
    event.preventDefault();
    console.log("move down")
  }
});

Can you be more specific works here in chrome, click the list to give the div focus then hit keys — shaunhusain, Mar 23 '14 at 17:00

score 0 · Answer 2 · answered Mar 28 '14 at 10:16

Here is an example, http://jsfiddle.net/mato75/wKJ26/3/

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.list = ['item1', 'item2', 'item3', 'item4', 'item5'];

$scope.selected = 'item2';

$scope.isSelected = function(item) {
    return item === $scope.selected ? 'active' : '';
}


$scope.selectItem = function (item) {
    $scope.selected = item;
}

$scope.keyDown = function (event) {
    var indx = $scope.list.indexOf($scope.selected);
    switch(event.keyCode) {
        case 40:
            var nIndx = indx === $scope.list.length - 1 ? 0 : indx + 1;
            var item = $scope.list[nIndx];
            $scope.selectItem(item);
            event.preventDefault();
            break;
        case 38:
            var nIndx = indx ===  0 ? $scope.list.length - 1 : indx - 1;
            var item = $scope.list[nIndx];
            $scope.selectItem(item);  
            event.preventDefault();              
            break
    }
}           
}]);

onKeyUp onKeyDown move inside the div through the elements AngularJS

2 Answers2