Angularjs之ngModel中的值驗(yàn)證綁定方法
眾所周知,在Angular中ngModel為動(dòng)態(tài)雙向綁定,存在兩種方式。
例如,
方式一:
在html中,
<input type="text" ng-model="searchText" /> <button ng-click="check(searchText)">Check!</button> {{ searchText }}
在controller中
$scope.check = function (searchText) { console.log(searchText); }
方式二:
引用stackoverflow的一句話,
“If you use ng-model, you have to have a dot in there.” Make your model point to an object.property and you'll be good to go.
在html中,
<input ng-model="formData.searchText"/> <button ng-click="check()">Check!</button>
在controller中,
$scope.formData = {}; $scope.check = function () { console.log($scope.formData.searchText.$modelValue); }
但是我們常常會(huì)對ngModel當(dāng)中的值進(jìn)行驗(yàn)證,例如,
<input type="password" pattern="[0-9]*" placeholder="請輸入6位新密碼" ng-model="password.new_password" ng-blur="validateLength()">
<input type="password" ng-model="password.new_password" ng-keyup="compare(password)" name="repassword" ng-pattern="/^[0-9]{1,6}$/" />
發(fā)現(xiàn)ngModel當(dāng)中的password.new_password不能實(shí)時(shí)綁定到controller中,原因?yàn)閚gModel的值并沒有符合pattern的規(guī)則。若符合規(guī)則,則正常綁定傳遞。
以上這篇Angularjs之ngModel中的值驗(yàn)證綁定方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無法使用的問題
- Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
- AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
- 詳解Angularjs 自定義指令中的數(shù)據(jù)綁定
- 淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
- angularjs 的數(shù)據(jù)綁定實(shí)現(xiàn)原理
- Angular數(shù)據(jù)綁定機(jī)制原理
- AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用
- 解析Angular 2+ 樣式綁定方式
- 詳解Angular數(shù)據(jù)綁定及其實(shí)現(xiàn)方式
相關(guān)文章
angularjs學(xué)習(xí)筆記之三大模塊(modal,controller,view)
本文給大家記錄的是angularjs的三大模塊(modal,controller,view)的使用說明,方便初學(xué)者能夠順利的學(xué)習(xí)angularjs.2015-09-09Angular實(shí)現(xiàn)下載安裝包的功能代碼分享
本文通過實(shí)例代碼給大家介紹了angular實(shí)現(xiàn)下載安裝包的功能以及基于angularjs代碼實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)的功能,需要的朋友參考下吧2017-09-09angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法,需要的的朋友參考下2017-01-01Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法
下面小編就為大家分享一篇angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJS動(dòng)態(tài)加載模塊和依賴的方法分析
這篇文章主要介紹了AngularJS動(dòng)態(tài)加載模塊和依賴的方法,結(jié)合實(shí)例形式分析了AngularJS使用ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)加載的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11詳解使用angular框架離線你的應(yīng)用(pwa指南)
這篇文章主要介紹了詳解使用angular框架離線你的應(yīng)用(pwa指南),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01解決angular2 獲取到的數(shù)據(jù)無法實(shí)時(shí)更新的問題
今天小編就為大家分享一篇解決angular2 獲取到的數(shù)據(jù)無法實(shí)時(shí)更新的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08