[英]submit form using Enter key using angular.js
我需要一個幫助。當用戶使用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>
如果用戶在不輸入任何數據的情況下按Enter鍵,則將顯示驗證。如果用戶通過提供將提交的所有數據數據按Enter鍵,現在我可以通過單擊按鈕進行操作,但在此我需要。請幫我。
您可以像這樣輸入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();">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.