2015-11-30 32 views
0

我有一个关于使用Angular.js.激活Enter键的问题,我在下面解释我的代码。无法使用Angular.js激活Enter键

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-submit="addProfileData(billdata);" > 
<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">College Title :</span> 
<input type="text" name="colgmname" id="procolgtitle" class="form-control" placeholder="Add College Title" ng-model="colgname" ng-keypress="clearField('procolgtitle');" maxlength="50"> 
</div> 

<div class="input-group bmargindiv1 col-md-12"> 
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Subtitle :</span> 
<input type="text" name="subtitle" id="procolgsubtitle" class="form-control" placeholder="Add College Subtitle" ng-model="shortname" ng-keypress="clearField('procolgsubtitle');" maxlength="30"> 
</div> 

<div class="input-group bmargindiv1 col-md-12"> 
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Mobile No (10 digits) :</span> 
<div ng-class="{ 'myError': billdata.mobno.$touched && billdata.mobno.$invalid }"> 
<input type="text" name="mobno" id="procolgcontactno" class="form-control" placeholder="Add Mobile No" ng-model="contno" ng-pattern="/^[0-9]{10,10}$/" ng-keypress="clearField('procolgcontactno');" > 
</div> 
</div> 
<div class="help-block" ng-messages="billdata.mobno.$error" ng-if="billdata.mobno.$touched"> 
<p ng-message="pattern" style="color:#F00;">Please add a valid 10 digit mobile no.</p> 
</div> 
<div class="input-group bmargindiv1 col-md-12"> 
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Address :</span> 
<div ng-class="{ 'myError': billdata.email.$touched && billdata.email.$invalid }"> 
<input type="email" name="email" id="procolgmail" class="form-control" placeholder="Add Email Address" ng-model="colgemail" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" ng-keypress="clearField('procolgmail');" maxlength="50"> 
</div> 
</div> 
<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched"> 
<p ng-message="email" style="color:#F00;">This needs to be a valid email</p> 
<p ng-message="pattern" style="color:#F00;">This field needs valid email format([email protected]).</p> 
</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">College Code :</span> 
<input type="text" name="colgcode" id="procolgcode" class="form-control" placeholder="Add College Code" ng-model="colgcode" ng-keypress="clearField('procolgcode');" maxlength="30" > 
</div> 
<div class="input-group bmargindiv1 col-md-12"> 
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Address :</span> 
<textarea id="procolgaddress" name="address" class="form-control" placeholder="Add College Address" rows="5" ng-model="address" style="height:122px" ng-keypress="clearField('procolgaddress');"></textarea> 
</div> 
</div> 

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

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

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

</form> 

工作形式:

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-submit="addSectionData();"> 
<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">College Name :</span> 
<select class="form-control" id="colg_name" ng-model="colg_name" ng-options="colg.name for colg in listOfCollege track by colg.value " ng-change="removeBorder('colg_name',colg_name);" ng-readonly="colgread" ng-disabled="colgdis"> 
</select> 
</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">Section Name</span> 
<input type="text" name="colgmname" id="resourcesection" class="form-control" placeholder="Add section" ng-model="section" ng-keypress="clearField('resourcesection');" > 
</div> 
</div> 
<div class="clearfix"></div>  
<div style="text-align:center; padding-top:10px;"> 
<input type="button" class="btn btn-success" ng-click="addSectionData();" id="addProfileData" ng-value="buttonName"/> 
<input type="button" class="btn btn-red" ng-click="cancelSectionData();" id="addProfileData" ng-value="cancelbuttonName" ng-show="showCancel"/> 
</div> 

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

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

在这种形式下,当我按下enter键没有什么是happening.Here我需要两个按钮,点击Enter键提交form.Please帮我解决这个问题。

+0

你好,你可以使用NG-按键事件。同时检查确认输入键ASCII值为32.然后你可以全部设置。 –

+0

我在其他操作的所有字段中都有'ng-keypress'事件。我可以在那里调用提交函数吗? – subhra

+0

您可以使用它。你需要检查程序中的所有验证。你也可以请通过表格的ng提交。 –

回答

0

你有按钮。我认为应该提交按钮

更换

<input type="button" class="btn btn-success" ng-click="addProfileData(billdata);" id="addProfileData" ng-value="buttonName"/> 

<input type="submit" class="btn btn-success" id="addProfileData" ng-value="buttonName"/> 

否则,如果你可以用打击提到的指令。

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="addProfileData(billdata);" > 
+0

@ Krish:你说的对,但是以某种形式工作。在这里我不知道问题是什么。 – subhra

+0

@subhra你能在plunkr中放置一个工作代码并提供给我们链接吗?它会帮助我们确定这里有什么问题 – krish

+0

我在这里做了同样的事情,我在那里做过。但是我发布了工作表单。 – subhra