淺談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用戶選擇器指令,結(jié)合實(shí)例形式分析了angular指令實(shí)現(xiàn)選擇器功能的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11
詳解AngularJS臟檢查機(jī)制及$timeout的妙用
本篇文章主要介紹了詳解AngularJS臟檢查機(jī)制及$timeout的妙用，“臟檢查”是Angular中的核心機(jī)制之一，它是實(shí)現(xiàn)雙向綁定、MVVM模式的重要基礎(chǔ)，有興趣的可以了解一下2017-06-06
本文主要介紹AngularJS Scope(作用域),這里對(duì)Score知識(shí)做了詳細(xì)介紹,并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
AngularJS基礎(chǔ) ng-mouseleave 指令詳解
本文主要介紹AngularJS ng-mouseleave 指令,這里幫大家整理了ng-mouseleave指令的詳細(xì)資料,并附有代碼示例,有需要的小伙伴可以參考下2016-08-08
AngularJS在IE下取數(shù)據(jù)總是緩存問(wèn)題的解決方法
這篇文章主要介紹了AngularJS在IE下取數(shù)據(jù)總是緩存問(wèn)題的解決方法,分析了問(wèn)題的原因及AngularJS設(shè)置禁止IE對(duì)ajax緩存的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-08-08
總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
AngularJS是如今最受歡迎的JS框架之一，簡(jiǎn)化開發(fā)過(guò)程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴(kuò)展到具有全部特征的客戶端應(yīng)用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤，有需要的可以參考學(xué)習(xí)下。2016-08-08
詳解AngularJS中module模塊的導(dǎo)入導(dǎo)出
本文給大家介紹angularjs中module模塊的導(dǎo)入導(dǎo)出，涉及到angularjs module相關(guān)知識(shí)，對(duì)angularjs module感興趣的朋友一起看看吧2015-12-12
本文主要介紹AngularJS XHR和依賴注入，這里整理了詳細(xì)資料和示例代碼，有興趣的小伙伴可以參考下2016-08-08
Angular實(shí)現(xiàn)form自動(dòng)布局
這篇文章主要介紹了Angular實(shí)現(xiàn)form自動(dòng)布局的相關(guān)資料，以代碼片段的形式分析了Angular實(shí)現(xiàn)form自動(dòng)布局的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-01-01
angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01