Question

所以我有一个带有以下按钮的表单：

<form name="invoiceLine">
  <div class="rTableRow">
    <div class="rTableCell rTableCellXsm" ng-keyup="keyPress($event)">{{invoice_line.line}}</div>
    <div class="rTableCell rTableCellL" >
      <datecomponent style="display: inline-block" model="invoice_line.date" elementid="il2" tabindex="'1'"></datecomponent>
    </div>
    <div class="rTableCell rTableCellXl" ng-keyup="keyPress($event)">
      <input id="invLineDesc" style="width: 90%;" type="text" ng-model="invoice_line.description" ng-maxlength="30" tabindex="2">
      <span class="redtext">*</span>
    <div>{{invoice_line.description.length <= 30 ? 30 - invoice_line.description.length + ' chars remaining' : 'Description too long!' }}</div>
    </div>
    <div class="rTableCell rTableCellL" ng-keyup="keyPress($event)">
      $<input style="width: 50%; margin-left: 5px;" type="text" ng-model="invoice_line.amount" tabindex="3">
     </div>
     <div class="rTableCell rTableCellL">
       <input type="button" class="button {{buttonPrefColor}}" ng-click="add_new_invoice_line()" ng-show="invoiceLine.$dirty" value="Add New" tabindex="4">
       <input type="button" class="button {{buttonPrefColor}}" ng-click="reset_invoice_line_btn()" ng-show="invoiceLine.$dirty" value="Reset" tabindex="5">
     </div>
   </div>
 </form>

但是，如果我选中Add New按钮并点击＆＃34;输入＆＃34;然后它调用两次ng-click功能。如果我点击它，它只会触发一次。有什么想法吗？

Answer 1

查看form指令的documentation，它对Angular在表单上按Enter键时的作用有一些规则：

要防止双重执行处理程序，请仅使用ngSubmit或ngClick指令之一。这是因为HTML规范中的以下表单提交规则：

如果表单只有一个输入字段，则点击此字段中的输入触发表单提交（ngSubmit）

如果表单有2个以上的输入字段且没有按钮或输入[type = submit]，则按Enter键不会触发提交

如果表单有一个或多个输入字段和一个或多个按钮或输入[type = submit]，则在任何输入字段中输入enter将触发第一个按钮上的click处理程序或输入[type = submit]（ ngClick）和封闭表单上的提交处理程序（ngSubmit）

我认为有几种方法可以解决这个问题，但这可能是最不具备问题的方法：

从按钮中删除ng-click处理程序，然后在表单上使用ng-submit：

<form name="myForm" ng-submit="add_new_invoice_line()">
...
<button type="submit">Add New</button>
</form>

其他想法：

一起删除<form>标记。除非您想使用Angular的表单验证功能。
尝试在“添加新”按钮之前添加隐藏按钮，以便Angular在您按Enter键时找到该按钮。

AngularJs ng-click在按下按钮时按两次

1 个答案: