Question

我有一个输入：

<table>
...
<td style="width:59px"><input ng-model="myModel.propertyOne"  ng-blur="persistValue(myModel)"  enter-as-tab></td>
<td style="width:59px"><input ng-model="myModel.propertyTwo"  ng-blur="persistValue(myModel)"  enter-as-tab></td>

带有指令

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

当用户按Enter键时调用此指令，并将焦点设置为下一个标记的输入。

我的问题是调用了该指令，但未调用elementToFocus.focus（），因此未设置焦点。

我不明白为什么。有人知道吗？

http://jsfiddle.net/tomy29/vpaqt29d/105/

由于

Answer 1

您需要先找到父级，然后转到下一个元素。

请尝试以下代码：

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();
                console.log("parent");
                console.log(element.parent())
                var elementToFocus = element.parent().next('td').find('input')[0];
                console.log("next element");
                console.log(elementToFocus);
                if (angular.isDefined(elementToFocus)) elementToFocus.focus();
            }
        });
    };
});

JSFiddle

- EDIT--
这绝对可以优化，但一个粗略的做法如下：

<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'>
            <td>
                <input type='text' name="personName" ng-model="person.name" enter-as-tab />
            </td>
            <td>
                <input type='number' name="personAge" ng-model="person.age" enter-as-tab/>
            </td>
        </tr>
    </table>
</body>

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();
                console.log("parent");
                console.log(element.parent())
                var elementToFocus = element.parent().next('td').find('input')[0];
                console.log('next element');
                console.log(elementToFocus);
                if (angular.isDefined(elementToFocus)) {
                    elementToFocus.focus();
                } else {
                    element.parent().parent().next('tr').find('input')[0].focus();
                }
            }
        });
    };
});

JSFiddle

Answer 2

您可以使用此代码

$(this).closest('td').next('td').find('input')[0];

目前，this是当前td的输入字段。因此，通过它，您可以找到当前td的下一个输入。

这是工作JSFIDDLE

Angularjs：没有调用指令

2 个答案: