Enter as Tab

Using the enter/return as Tab

by Albert

HTML

<body ng-app="ap" ng-controller="con"> 
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr ng-repeat='person in persons'>
            <td>
                <input type='text'
                    name="personName"
                    ng-model="person.name" 
                />
            </td>
            <td>
                <input type='number'
                    name="personName"
                    ng-model="person.age" 
                    enter-as-tab
                />
            </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();
                // Go to next age input                        
            }
        });
    };
});