淺談angular表單提交中ng-submit的默認使用方法
更新時間：2018年09月30日 16:10:11 作者：狗子life
今天小編就為大家分享一篇淺談angular表單提交中ng-submit的默認使用方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在表單提交的時候，我使用了一個button，但ng-submit寫在form標簽中，然而button中我未使用任何方法訪問submit（）函數(shù)
<div ng-app="dkr">
<div ng-controller="logincontrol">
<form ng-submit="submit(user)">
<div>賬號名 <input type="text" ng-model="user.username"/></div>
<div>密碼 <input type="text" ng-model="user.password"></div>
<button type="submit">提交</button>
<div ng-show="success.length>0">{{success}}</div>
<div ng-show="error.length>0">{{error}}</div>
</form>
</div>
<code class="language-html"></div></code>
angular.module("dkr",[])
.controller("logincontrol",function($scope){
$scope.user={username:'',password:''};
$scope.success="";
$scope.error="";
$scope.submit=function(u){
if($scope.user.username=="admin"&&$scope.user.password=="123"){
$scope.success="success";
$scope.error="";
}
else{
$scope.success="";
$scope.error="error";
}
console.log(u);
};
})
點擊提交后的結果：
如上所示，返回結果以及控制臺打印完全正確。
然而我對提交這個button未做任何處理
然后經(jīng)過測試，我發(fā)現(xiàn)button的默認type為submit。
因為只要將
<button>提交</button>
改成
<button type="button">提交</button>
之后
點擊按鈕沒有任何反應。
因此在form表單提交的時候一定要注意button標簽的默認使用。
以上這篇淺談angular表單提交中ng-submit的默認使用方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復的開發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機制,結合實例形式分析了AngularJS雙向數(shù)據(jù)綁定機制的原理及實現(xiàn)方法,以及減少需要重復開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)猜大小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關于Angular學習教程之RouterLink花式跳轉的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2018-05-05
這篇文章主要介紹了AngularJS延遲加載html template 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
使用AngularJS和PHP的Laravel實現(xiàn)單頁評論的方法
這篇文章主要介紹了使用AngularJS和PHP的Laravel實現(xiàn)單頁評論的方法,本文的示例是前端JavaScript和后端PHP聯(lián)合編程的典范,需要的朋友可以參考下2015-06-06
本文主要講解 AngularJS REST和定制服務的知識，這里幫大家整理了相關知識，并附示例代碼，詳細講解了RES和定制服務的知識，有興趣的小伙伴可以參考下2016-08-08
下面小編就為大家?guī)硪黄猘ngularjs中的$eval方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS ng-repeat數(shù)組有重復值的解決方法
不知道大家是否遇到過這個問題，在當Angular.JS ng-repeat數(shù)組中有重復項時，系統(tǒng)就會拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
本文主要介紹了Angular2組件的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
單元測試是一種能夠幫助開發(fā)者驗證代碼中某一部分有效性的技術。下面這篇文章主要給大家介紹了關于利用Jasmine對Angular進行單元測試的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06