Angular的事件和表單詳解
前面的文章說(shuō)道了click事件,與其類(lèi)似的mouseover以及mousemove等等。下面看看selected、change、copy等運(yùn)用在表單的事件吧。
selected
<div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa" value="{{aaa}}"> <select> <option>11111</option> <option ng-selected="aaa">22222</option> <option>33333</option> </select> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
如果我們希望一個(gè)select選中指定的option,只需要設(shè)置該option為selected="selected",現(xiàn)在為第二個(gè)綁定一個(gè)變量aaa,對(duì)應(yīng)了一個(gè)單選框的ng-model,但單選框選中時(shí)aaa為true,取消選中時(shí)為false,這樣就能設(shè)置option的selected了。
change
<div ng-controller="Aaa"> <input type="text" ng-change="bbb='hello'" ng-model="bbb"> <p>{{bbb}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
當(dāng)輸入框的內(nèi)容發(fā)現(xiàn)改變的時(shí)候,讓bbb變量設(shè)為'hello'。
copy
<div ng-controller="Aaa"> <input type="text" value="xiecg" ng-copy="ccc='hello'"> <p>{{ccc}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){}]); </script>
當(dāng)我們粘貼內(nèi)容到輸入框的時(shí)候,ccc的值變成'hello'。
除此之外,還有cut(剪切)、paste(粘貼事件)。
下面看個(gè)具體的表單驗(yàn)證的例子:
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input相關(guān)指令詳解</title> <link rel="stylesheet" > <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> <style type="text/css"> .username .ng-valid{background-color:lightgreen;} .username .ng-invalid{background-color:lightcoral;} .username .ng-pristine{background-color:#fafafa;} /* .username .ng-dirty{} .username .ng-invalid-required{} .username .ng-invalid-minlength{} .username .ng-valid-max-length{} */ </style> </head> <body> <div ng-controller="Aaa"> <div class="col-md-6"> <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid,user)" class="form-horizontal" novalidate> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="name">用戶名</label> </div> <div class="col-md-8 username"> <input class="form-control" id="name" name="name" type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model='user.name' /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span> <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid"></span> </div> </div> <div class="form-group has-feedback"> <div class="col-md-4"> <label for="url">URL</label> </div> <div class="col-md-8"> <input type="url" id="url" name="url" ng-model="user.url" class="form-control" /> <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span> </div> </div> <div class="form-group text-center"> <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" /> </div> </form> </div> <div class="col-md-12"> <p> 用戶名:{{user.name}} 沒(méi)修改:{{myForm.name.$pristine }} 修改過(guò):{{myForm.name.$dirty}} 驗(yàn)證失?。簕{myForm.name.$invalid}} 驗(yàn)證成功:{{myForm.name.$valid}} required:{{myForm.name.$error.required}} </p> <p> URL:{{user.url}} 沒(méi)修改:{{myForm.url.$pristine }} 修改過(guò):{{myForm.url.$dirty}} 驗(yàn)證失?。簕{myForm.url.$invalid}} 驗(yàn)證成功:{{myForm.url.$valid}} 錯(cuò)誤詳情:{{myForm.url.$error}} </p> </div> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ $scope.submitForm = function(isValid,data) { //驗(yàn)證表單是否可是提交 if (isValid) { console.log(data); }else{ console.log('驗(yàn)證失敗'); } }; }]); </script> </body> </html>
首先看看表單部分,使用了novalidate屬性禁用了表單默認(rèn)驗(yàn)證行為,并綁定了ng-submit綁定了submitForm方法。
在用戶名的input上設(shè)置了required,表示不能為空。ng-pattern是自定義的正則表達(dá)式。ng-model是數(shù)據(jù)(用戶填寫(xiě)的數(shù)據(jù))。
URL的input也是類(lèi)似的設(shè)置。
看一下在form綁定的submitForm函數(shù),傳遞了兩個(gè)參數(shù),myForm.$valid以及user。
myForm是form的name,代表整個(gè)表單,myForm.$valid是個(gè)布爾值,表示整個(gè)表單的元素是否通過(guò)驗(yàn)證,user是用戶填寫(xiě)的數(shù)據(jù),用于提交數(shù)據(jù)。我們都可以通過(guò)controller得到這些信息,然後提交給後端。
myForm代表整個(gè)表單,給input附上name值,就可以得到input的驗(yàn)證信息,我們以用戶名的input為例。
用戶名:{{user.name}}
沒(méi)修改:{{myForm.name.$pristine }}
修改過(guò):{{myForm.name.$dirty}}
驗(yàn)證失?。簕{myForm.name.$invalid}}
驗(yàn)證成功:{{myForm.name.$valid}}
required:{{myForm.name.$error.required}}
這里除了第一個(gè)之外,其他都是布爾值。
在用戶名的input的同級(jí)上有兩個(gè)span元素,分別是正確和錯(cuò)誤的圖標(biāo)。(ng-show用于控制元素的顯示和隱藏,後面會(huì)詳細(xì)介紹)
myForm.name.$dirty && myForm.name.$valid 當(dāng)用戶修改input的值了,并且驗(yàn)證成功了,我們給予正確的提示。
myForm.name.$dirty && myForm.name.$invalid 當(dāng)用戶修改input的值了,但是遺憾驗(yàn)證失敗了,我們給予失敗的提示。
除此之外,angular提供了class為我們做更多樣式上的提示。
angular在做驗(yàn)證時(shí),這些屬性會(huì)及時(shí)的添加到元素上,方便定制這些類(lèi)來(lái)實(shí)現(xiàn)特定的場(chǎng)景應(yīng)用。
當(dāng)我們?nèi)枯斎胝_就可以做ajax提交了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- AngularJS深入探討scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期
- AngularJS 入門(mén)教程之事件處理器詳解
- AngularJS 中的事件詳解
- 淺談angularJS中的事件
- Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- 詳細(xì)分析使用AngularJS編程中提交表單的方式
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
相關(guān)文章
AngularJS實(shí)現(xiàn)select的ng-options功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)select的ng-options功能,結(jié)合實(shí)例形式分析了AngularJS使用ng-options操作select列表的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼
這篇文章主要介紹了Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07angularJS結(jié)合canvas畫(huà)圖例子
這篇文章主要介紹了angularJS結(jié)合canvas畫(huà)圖例子的方法,需要的朋友可以參考下2015-02-02Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼
這篇文章主要為大家介紹了Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03AngularJS基礎(chǔ) ng-keydown 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keydown 指令,在這里幫大家整理了ng-keydown 指令的基礎(chǔ)資料,并附有代碼,有需要的朋友可以參考下2016-08-08AngularJS入門(mén)教程之?dāng)?shù)據(jù)綁定用法示例
這篇文章主要介紹了AngularJS之?dāng)?shù)據(jù)綁定用法,結(jié)合實(shí)例形式分析了AngularJS基于內(nèi)置指令ng-model實(shí)現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下2016-11-11AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05AngularJS 過(guò)濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過(guò)濾器,這里提供詳細(xì)了AngularJS 過(guò)濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下2016-07-07詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式
這篇文章主要介紹了詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11