SO 23430830 - arrow navigation question
Fiddle for Stack Overflow Question.
http://stackoverflow.com/questions/23430830/keyboard-navigation-in-angularjs-table
HTML
<div ng-app="myApp">
<div ng-controller="TestingCtrl">
<table navigatable>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons">
<td>
<input type="text" ng-model="p.name">
</td>
<td>
<input type="text" ng-model="p.age">
</td>
<td>
<button ng-click="add($index)">Add new person</button>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript
angular.module("myApp", [])
.controller("TestingCtrl", ["$scope",
function TestingCtrl($scope) {
$scope.persons = [{
name: 'Alice',
age: 20
}, {
name: 'Bob',
age: 30
}];
$scope.add = function(index) {
var newPerson = function() {
return {
name: '',
age: ''
};
};
$scope.persons.splice(index + 1, 0, new newPerson());
}
}
])
.directive('navigatable', function() {
return function(scope, element, attr) {
element.on('keypress.mynavigation', 'input[type="text"]', handleNavigation);
function handleNavigation(e) {
var arrow = {left: 37, up: 38, right: 39, down: 40};
// select all on focus
element.find('input').keydown(function(e) {
// shortcut for key other than arrow keys
if ($.inArray(e.which, [arrow.left, arrow.up, arrow.right, arrow.down]) < 0) {
return;
}
var input = e.target;
var td = $(e.target).closest('td');
var moveTo = null;
switch (e.which) {
case arrow.left:
{
if (input.selectionStart == 0) {
moveTo = td.prev('td:has(input,textarea)');
}
break;
}
case arrow.right:
{
if (input.selectionEnd == input.value.length) {
moveTo = td.next('td:has(input,textarea)');
}
break;
}
case arrow.up:
case arrow.down:
{
var tr = td.closest('tr');
var pos = td[0].cellIndex;
var moveToRow = null;
if (e.which == arrow.down) {
moveToRow = tr.next('tr');
}
else if (e.which == arrow.up) {
moveToRow = tr.prev('tr');
}
if (moveToRow.length) {
moveTo = $(moveToRow[0].cells[pos]);
}
...