Enter as Tab

Using the enter/return as Tab

by Albert

HTML

<body ng-app="ap" ng-controller="con"> 
    <h4>Pressing <i>Enter/Return</i> in the <i>Age</i> field will iterate through the ages</h4>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat='person in persons' enter-as-tab>
            <td>
                <input type='text'
                    name="personName"
                    ng-model="person.name" 
                />
            </td>
            <td>
                <input type='number'
                    name="personAge"
                    ng-model="person.age"                     
                />
            </td>
        </tr>
    </table>
</body>

JavaScript

var app = angular.module("ap", []);

app.controller("con", function ($scope) {

    $scope.persons = [
        { name: 'Susan', age: 1 }, 
        { name: 'Peter', age: 1 },
        { name: 'Jack', age: 2 }
    ];
});

app.directive('enterAsTab', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus = element.next('tr').find('input')[1];
                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});