使用案例

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（）＆＃39;按Enter键然后将值添加到我的数据模型。这很好。

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

但我真的想学习做事和有条不紊的方式。

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

感谢，
Ĵ

更新我不认为这是重复的，因为在我的情况下，我不能在输入字段中添加指令，因为它们是由角度动态创建的，只有第一个应该被聚焦。如上所述，它们的数量是可变的。除了jQuery one-liner之外，我没有看到如何识别其中的第一个。

Answer 1

使用案例

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

表单提交是通过Ajax通过$ resource或$ service
需要IE 9支持
＆＃34;角路＆＃34;是必需的

有关演示，请参阅此jsFiddle。如果我理解你的问题，请告诉我。

控制器

控制器将包含用于管理数据或将资源提交到服务器的代码。然后它将广播一个已提交数据的事件。由于原帖中没有提供代码，我已经冒昧填补空白。

或者，可以使用$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"将选择第二个孩子，依此类推......可以使用更新的演示here。

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

Answer 2

您可以检查第一个元素并在该情况下应用属性“autofocus”

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

将某个输入字段聚焦在angularjs中

2 个答案:

使用案例

控制器

指令

指令＃2