javascript - 使用 angular.js 使用 Enter 键提交表单

Question

我需要一个帮助。当用户使用 Angular.js 按 Enter 键时，我需要提交表单。我在下面解释我的代码。

    <form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
    <div id="SHOWDATA">
        <div id="transactionsPortlet" class="panel-collapse collapse in">
            <div class="portlet-body">
                <div class="totalaligndiv">
                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Subject Type:</span>
                            <input type="text" name="shortname" id="resourcesub" class="form-control" placeholder="Add Your Subject Type " ng-model="subject" ng-keypress="clearField('resourcesub');">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">No of Classes:</span>
                            <select class="form-control" id="resourceperiod" ng-model="period" ng-change="removeBorder('resourceperiod',subject);">
                                <option value="">Select Class</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div style="text-align:center; padding-top:10px;">
                        <input type="button" class="btn btn-success" ng-click="addClassData();" id="addProfileData" ng-value="buttonName" />
                        <input type="button" class="btn btn-red" ng-click="cancelClassData();" id="cancelProfileData" ng-value="cancelbuttonName" ng-show="showCancel" />

                    </div>

                    <div class="clearfix"></div>

                </div>
            </div>
        </div>
    </div>
</form>

这里我需要如果用户按下回车键而不提供任何数据，则会显示验证。如果用户通过提供所有数据按下回车键，表单将提交。现在我可以通过单击按钮来执行操作，但在这里我两者都需要。请帮助我。

Answer 1

你可以像这样放置 ng-submit :

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-submit="addClassData();">

或者如果您想保留它按钮而不是提交按钮，那么下面的指令可能会帮助您。

angular.module('NgEnter', [])
    .directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keypress", function(e) {
                if(e.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'e': e});
                    });
                    e.preventDefault();
                }
            });
        };
    });

然后调用该指令

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-enter="addClassData();">