在这个特殊的情况下,我有什么选项,使这些输入调用函数时,我按下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');
    };
}])

当前回答

Angular提供了开箱即用的支持。你在表单元素上尝试过ngSubmit吗?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

编辑:根据关于提交按钮的评论,请参阅通过按enter不提交按钮提交表单,其中给出了解决方案:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

如果您不喜欢隐藏的提交按钮解决方案,则需要将控制器函数绑定到Enter keypress或keyup事件。这通常需要一个自定义指令,但AngularUI库已经设置了一个很好的按键解决方案。参见http://angular-ui.github.com/

添加angularUI库后,你的代码会像这样:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

或者您可以将回车键绑定到每个单独的字段。

另外,请参阅创建简单keypres指令的SO问题: 如何在AngularJS中检测onKeyUp ?

编辑(2014-08-28):在写这个答案的时候,ng-keypress/ng-keyup/ng-keydown还不存在于AngularJS中。在下面的评论中@darlan-alves有一个很好的解决方案:

<输入ng -keyup = " $事件。==地理==根据美国人口普查,这个县的总面积为,其中土地和(0.991平方公里)水。/>

其他回答

Angular提供了开箱即用的支持。你在表单元素上尝试过ngSubmit吗?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

编辑:根据关于提交按钮的评论,请参阅通过按enter不提交按钮提交表单,其中给出了解决方案:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

如果您不喜欢隐藏的提交按钮解决方案,则需要将控制器函数绑定到Enter keypress或keyup事件。这通常需要一个自定义指令,但AngularUI库已经设置了一个很好的按键解决方案。参见http://angular-ui.github.com/

添加angularUI库后,你的代码会像这样:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

或者您可以将回车键绑定到每个单独的字段。

另外,请参阅创建简单keypres指令的SO问题: 如何在AngularJS中检测onKeyUp ?

编辑(2014-08-28):在写这个答案的时候,ng-keypress/ng-keyup/ng-keydown还不存在于AngularJS中。在下面的评论中@darlan-alves有一个很好的解决方案:

<输入ng -keyup = " $事件。==地理==根据美国人口普查,这个县的总面积为,其中土地和(0.991平方公里)水。/>

如果你想调用函数没有形式,你可以使用我的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账户上提交了其他很棒的指令。

非常好,干净和简单的指令与shift +进入支持:

app.directive('enterSubmit', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                 var code = event.keyCode || event.which;
                 if (code === 13) {
                       if (!event.shiftKey) {
                            event.preventDefault();
                            scope.$apply(attrs.enterSubmit);
                       }
                 }
            });
        }
    }
});

我想要一些比给出的答案更可扩展/语义的东西,所以我写了一个指令,以类似于内置ngClass的方式接受javascript对象:

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

对象的值在指令作用域的上下文中计算——确保它们被括在单引号中,否则所有函数都将在加载指令时执行(!)

例如: Esc: 'clear()'而不是Esc: clear()

Javascript

myModule
    .constant('keyCodes', {
        esc: 27,
        space: 32,
        enter: 13,
        tab: 9,
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        capslock: 20,
        numlock: 144
    })
    .directive('keyBind', ['keyCodes', function (keyCodes) {
        function map(obj) {
            var mapped = {};
            for (var key in obj) {
                var action = obj[key];
                if (keyCodes.hasOwnProperty(key)) {
                    mapped[keyCodes[key]] = action;
                }
            }
            return mapped;
        }
        
        return function (scope, element, attrs) {
            var bindings = map(scope.$eval(attrs.keyBind));
            element.bind("keydown keypress", function (event) {
                if (bindings.hasOwnProperty(event.which)) {
                    scope.$apply(function() {
                         scope.$eval(bindings[event.which]);
                    });
                }
            });
        };
    }]);

使用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。如果同时使用一个表单标签,则必须包含一个提交按钮。