ng提交下拉列表和文本区域

Question

Hi I have follow code:

<form ng-submit="ctrl.commitEdit(sign)">
    <input ng-model="sign.Value">
    <input ng-model="sign.Date">
    <textarea ng-model="sign.Comment"></textarea>
    <select ng-model="sign.Property"></select>
    <button type="submit">Save</button>
</form>

With my form around my components I tried to save my edits in two ways (in my form I call in the ng-submit a method from my controller, which saves my edits):

• With the click on my button, which has the type "submit", it calls the function in the ng-submit of my form. This works correctly! It saves
• Then I also would like to save with pressing the "enter" on my keyboard. Thats why I used the form an ng-submit with my button of type submit. This works only, when I change something in my inputs and the focus is there! When I change something in my textarea and I press "enter", it makes a break. When I change something in my dropdown and then press "enter", it opens the dropdown again.

So I would like to save with pressing "enter" in every way, on the input, select and textarea. How can I do this?

Thanks

Answer 1

All you need to do is use ngKeyup.

https://docs.angularjs.org/api/ng/directive/ngKeyup

Just bind it with enter key code which is 13 and call your function

Moreover here is a directive you can implement for your purpose.

app.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.preventDefault();
                }
            });
        };