在这个特殊的情况下,我有什么选项,使这些输入调用函数时,我按下Enter?

Html:

<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>
// Controller //
.controller('mycontroller', ['$scope',function($scope) {
    $scope.name = '';
    $scope.email = '';
    // Function to be called when pressing ENTER
    $scope.myFunc = function() {
       alert('Submitted');
    };
}])

当前回答

FWIW -这是一个我用于基本确认/警报引导模式的指令,不需要<form>

(只需切换出jQuery的点击动作,无论你喜欢什么,并添加data-easy-dismiss到你的模式标签)

app.directive('easyDismiss', function() {
    return {
        restrict: 'A',
        link: function ($scope, $element) {

            var clickSubmit = function (e) {
                if (e.which == 13) {
                    $element.find('[type="submit"]').click();
                }
            };

            $element.on('show.bs.modal', function() {
                $(document).on('keypress', clickSubmit);
            });

            $element.on('hide.bs.modal', function() {
                $(document).off('keypress', clickSubmit);
            });
        }
    };
});

其他回答

如果你想调用函数没有形式,你可以使用我的ngEnter指令:

Javascript:

angular.module('yourModuleName').directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'event': event});
                    });

                    event.preventDefault();
                }
            });
        };
    });

HTML:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

我在我的twitter和gist账户上提交了其他很棒的指令。

我把重点放在表中输入的行下面

<input ng-keydown="$event.keyCode == 13 && onPressEnter($event)" id="input_0" type="text" >

    $scope.onPressEnter = function (event) {
    let inputId = event.target.id;
    let splited = inputId.split('_');
    let newInputId = 'input' + '_' + ((+splited[1]) + 1);
    if (document.getElementById(newInputId))
        document.getElementById(newInputId).focus();
   // else submit form
}

如果你也想要数据验证

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

这里重要的添加是$loginForm。$valid将在执行函数之前验证表单。您必须为验证添加其他属性,这超出了这个问题的范围。

祝你好运。

您可以简单地将@Hostlistener与组件绑定,其余的将由它负责。它不需要从HTML模板中绑定任何方法。

@HostListener('keydown',['$event'])
onkeydown(event:keyboardEvent){
  if(event.key == 'Enter'){
           // TODO do something here
           // form.submit() OR API hit for any http method
  }
}

上面的代码应该适用于Angular 1+版本

使用ng-submit并将两个输入包装在单独的表单标签中:

<div ng-controller="mycontroller">

  <form ng-submit="myFunc()">
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
  </form>

  <br />

  <form ng-submit="myFunc()">
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
  </form>

</div>

将每个输入字段包装在自己的表单标记中,允许ENTER在任何表单上调用submit。如果同时使用一个表单标签,则必须包含一个提交按钮。