提问



在这种特殊情况下,当我按Enter键时,我有什么选项可以让这些输入调用一个函数?


// HTML view //
<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吗?[26]


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


编辑:根据有关提交按钮的评论,请参阅提交表单,按下输入而不提交按钮,提供以下解决方案:


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


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


添加angularUI lib后,您的代码将类似于:


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


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


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


编辑(2014-08-28):在撰写本答案时,ng-keypress/ng-keyup/ng-keydown在AngularJS中不作为本机指令存在。在下面的评论中@darlan-alves有一个非常好的解决方案:


<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

其它参考1


如果要在没有表单的情况下调用函数,可以使用我的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>


我在推特和我的要点账户上提交了其他令人敬畏的指令。[30] [31]

其它参考2


如果您只有一个输入,则可以使用表单标记。


<form ng-submit="myFunc()" ...>


如果您有多个输入,或者不想使用表单标记,或者想要将输入键功能附加到特定字段,则可以将其内联到特定输入,如下所示:


<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

其它参考3


我想要比给定答案更具可扩展性/语义性的东西,所以我写了一个指令,它以类似于内置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]);
                    });
                }
            });
        };
    }]);

其它参考4


另一种方法是使用ng-keypress,


<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 


使用AngularJS按Enter键提交输入 - jsfiddle [32]

其它参考5


具有shift + enter支持的非常好,干净且简单的指令:


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);
                       }
                 }
            });
        }
    }
});

其它参考6


如果您还想要数据验证


<!-- 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,它将在执行函数之前验证表单。您将不得不添加其他属性以进行验证,这超出了此问题的范围。


祝你好运。

其它参考7


只是想指出,在有一个隐藏的提交按钮的情况下,您可以使用ngShow指令并将其设置为false,如下所示:


HTML


<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

其它参考8


使用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在任一表单上调用提交。如果您为两者使用一个表单标记,则必须包含提交按钮。

其它参考9


使用CSS类而不是重复内联样式会稍微整洁。


CSS


input[type=submit] {
    position: absolute;
    left: -9999px;
}


HTML


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

其它参考10


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);
            });
        }
    };
});