首页 > ng-click绑定空方法会触发ng-submit

ng-click绑定空方法会触发ng-submit

1 ng-form中嵌套一个table,使用ng-click绑定方法实现单行编辑,但是发现如果绑定的方法为空方法或者仅存在异步调用,会触发ng-submit

<form id="mpPriceForm" class="form-horizontal col-md-offset-1"role="form" novalidate name="" ng-submit="saveStockAndPrice()">

<table>
<tr>
<td>
&lt;button ng-click="edit(row)" type="button" class="btn btn-info" ng-if="!row.isEditing">&lt;span>编辑&lt;/span>&lt;/button></br>
&lt;button ng-click="cancel(row)" class="btn btn-info" ng-if="row.isEditing"><span>取消&lt;/span>&lt;/button></br>
&lt;button ng-click="updateStock(row)"  class="btn btn-info" ng-if="row.isEditing"><span>保存&lt;/span></button>
</td>
</tr>
</table>

2 saveStockAndPrice 方法是form级别的提交方法,其他方法如下:

$scope.edit = function(row){
    row.isEditing = true;
}
    
$scope.updateStock = function(row){
    $http({
        method:'POST',
        url:"stock/updateMerchantProductRealStockNum.do",
        data:{merchantId: row.merchantProductId,realStockNum:row.realStockNum},
        headers : {'Content-Type' : 'application/json'}})
    .success(function(result){
        row.isEditing = false;
        })
    // row.isEditing = false;  //如果不注释不会触发        
}

$scope.cancel = function(row){
    row.isEditing = false;//空方法会触发ng-submit
}

3 上述三个方法,如果方法体为空会触发ng-submit,如果只有$http异步操作语句,也会触发ng-sumit

4 根据stackoverflow的说法,需要添加type=button 可以抑制submit的提交行为。

5 因此不太明白angular的具体ng-submit的机制


form标签里的<button>默认为type="submit",请使用input type="button"


为何不直接阅读文档:form

【热门文章】
【热门文章】