javascript - 在angularjs中聚焦某个输入字段

Question

所以我有可变数量的输入字段，保存它们后我想将焦点返回到第一个。

HTML代码:

<td ng-repeat='col in list.cols'>
  <input class='colData' type='text' ng-model='newentry[$index]'  on-press-enter="addRow(newentry)">
</td>

正如您可能读到的那样，我在按回车键时调用“addRow()”，然后将值添加到我的数据模型中。这很好用。

添加数据后，我想将焦点设置到这些输入字段中的第一个。
我试图抵制依赖我的 jQuery 知识的冲动。如果我包含 jQuery，我可以做 $('input.colData').first().focus();.

但我真的在努力学习“以 Angular 方式”做事。

我将如何处理这种情况？
有没有办法通过它包含的模型来选择输入字段？

谢谢，
J

更新:我不认为这是重复的，因为在我的情况下我无法向输入字段添加指令，因为它们是由 angular 动态创建的，只有第一个应该被关注。如上所述，它们的数量是可变的。除了 jQuery 单行代码之外，我看不出如何识别其中的第一个。

Answer 1

用例

如何在提交表单后使用指令聚焦第一个元素？做出了以下假设:

• 通过 $resource 或 $service 通过 Ajax 完成表单提交
• 需要 IE 9 支持
• 需要“Angular-Way”

有关演示，请参阅此 jsFiddle .如果我正确理解了您的问题，请告诉我。

Controller

Controller 将包含用于管理数据或将资源提交到服务器的代码。然后它将广播一个数据已提交的事件。由于原始帖子中未提供代码，因此我冒昧地填补了空白。

或者，$promise 可用于触发事件，该事件将提供处理任何服务器问题的方法。

function ctrl($scope) {
    $scope.items = [ 'thing 1', 'thing 2', 'thing 3' ];
    $scope.data = [];

    $scope.addRow = function(newEntry) {
        var entry = newEntry || 'thing ' + $scope.items.length + 1;
        $scope.$evalAsync(function() {
            $scope.items.push(entry);
        });
    };

    $scope.submit = function() {
        console.log("Simulating a submit");
        $scope.$broadcast("formSubmitted");
    };
}

指令

指令将通过聚焦第一个元素来响应事件。后链接用于初始化事件并为事件设置监听器。当事件被触发时，元素将获得焦点。这创建了数据和表示的明确分离。

function onPressEnter() {
    return {
        restrict : 'A',
        scope: {
            onPressEnter: '&'
        },
        link: function($scope, $element, $attr, $ctrl) {
            $element.on('keyup', function(e) {
                if (e.which === 13) {
                    $scope.onPressEnter();
                }
            });

            $scope.$on("formSubmitted", function() {
                if ($scope.$parent.$first) {
                    $element[0].focus();
                }
            });
        }
    }
};

指令 #2

或者，您可以将此指令隔离为可重用组件并使用以下组件。您所要做的就是将 on-submit-focus="0" 添加到任何元素，使其专注于第一个子元素。 on-submit-focus="1" 会选择第二个 child ，依此类推...更新的演示可用 here .

function onSubmitFocus() {
    return function($scope, $element, $attr) {
        $scope.$on('formSubmitted', function() {
            if ($scope.$index === +$attr.onSubmitFocus) {
                $element.children()[0].focus();
            }
        });
    };
}