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