Change Tab index on ng-keydown

how can one change tab index on ng-key down

i have a text box in grid in angular on which i am calling a function on ng-keydown.

in that function i am validating "Insert Key" and performing some action.

i want to change tab index to next row after execution of that function. or you can say i want to change tab index on insert key after execution of that function.

The best way I think Tabindex

class="list-item" ng-repeat="item in items"
tabindex="{{item.tabIndex}}"
ng-class="item.selected"
ng-keydown="onKeydown(item, $event)" ng-focus="onFocus(item)">{{item.name}}

Then in your controller you want the Keydown handler;

var KeyCodes = {
BACKSPACE : 8,
TABKEY : 9,
RETURNKEY : 13,
ESCAPE : 27,
SPACEBAR : 32,
LEFTARROW : 37,
UPARROW : 38,
RIGHTARROW : 39,
DOWNARROW : 40,
};
$scope.onKeydown = function(item, $event) {
var e = $event;
var $target = $(e.target);
var nextTab;
switch (e.keyCode) {
case KeyCodes.ESCAPE:
$target.blur();
break;
case KeyCodes.UPARROW:
nextTab = - 1;
break;
case KeyCodes.RETURNKEY: e.preventDefault();
case KeyCodes.DOWNARROW:
nextTab = 1;
break;
}
if (nextTab != undefined) {
// do this outside the current $digest cycle
// focus the next element by tabindex
$timeout(() => $('[tabindex=' + (parseInt($target.attr("tabindex")) + nextTab) + ']').focus());
}
};

And also refer this link : https://stackoverflow.com/questions/16859970/navigate-the-ui-using-keyboard

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Manikandan Murugesan9y ago
The best way I think Tabindex
class="list-item" ng-repeat="item in items"
    tabindex="{{item.tabIndex}}"
    ng-class="item.selected"
    ng-keydown="onKeydown(item, $event)" ng-focus="onFocus(item)">{{item.name}}

Then in your controller you want the Keydown handler;
var KeyCodes = {
    BACKSPACE : 8,
    TABKEY : 9,
    RETURNKEY : 13,
    ESCAPE : 27,
    SPACEBAR : 32,
    LEFTARROW : 37,
    UPARROW : 38,
    RIGHTARROW : 39,
    DOWNARROW : 40,
};

$scope.onKeydown = function(item, $event) {
        var e = $event;
        var $target = $(e.target);
        var nextTab;
        switch (e.keyCode) {
            case KeyCodes.ESCAPE:
                $target.blur();
                break;
            case KeyCodes.UPARROW:
                nextTab = - 1;
                break;
            case KeyCodes.RETURNKEY: e.preventDefault();
            case KeyCodes.DOWNARROW:
                nextTab = 1;
                break;
        }
        if (nextTab != undefined) {
            // do this outside the current $digest cycle
            // focus the next element by tabindex
           $timeout(() => $('[tabindex=' + (parseInt($target.attr("tabindex")) + nextTab) + ']').focus());
        }
};
And also refer this link : https://stackoverflow.com/questions/16859970/navigate-the-ui-using-keyboard