angular 實(shí)時(shí)監(jiān)聽(tīng)input框value值的變化觸發(fā)函數(shù)方法
用angulajs + ionic 做了一個(gè)登陸頁(yè)面。效果要通過(guò)監(jiān)聽(tīng)輸入框的變化來(lái)判斷登陸按鈕是否可點(diǎn)擊。當(dāng)至少一個(gè)輸入框?yàn)榭諘r(shí)登錄按鈕不可點(diǎn)擊。一開(kāi)始是用的jquery的方法做的，后來(lái)發(fā)現(xiàn)刷新當(dāng)前頁(yè)可以實(shí)現(xiàn)效果，但是當(dāng)經(jīng)過(guò)路由跳轉(zhuǎn)后再回到登陸頁(yè)后，方法就被執(zhí)行了。
后來(lái)經(jīng)過(guò)查找資料，利用angular.js的$watch方法解決了。
代碼大概如下：
$scope.input = {//初始化，避免ng-model綁定取不到值
Tel:'',
Pwd:''
}
$scope.$watch('input.Tel', function(newValue, oldValue) {
console.log($scope.input.Tel);
if ($scope.input.Tel != oldValue){
//當(dāng)value改變時(shí)執(zhí)行的代碼
}
});
$scope.$watch('input.Pwd', function(newValue, oldValue) {
console.log($scope.input.Tel);
//當(dāng)value改變時(shí)執(zhí)行的代碼
});
$watch會(huì)監(jiān)聽(tīng)HTML中ng-model綁定的input.Tel，input.Pwd的值與初始化的input對(duì)象值作比較。接下來(lái)就可以執(zhí)行你自己的方法了。
以上這篇angular 實(shí)時(shí)監(jiān)聽(tīng)input框value值的變化觸發(fā)函數(shù)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
div實(shí)現(xiàn)自適應(yīng)高度的textarea實(shí)現(xiàn)angular雙向綁定
本文主要介紹了div實(shí)現(xiàn)自適應(yīng)高度的textarea，實(shí)現(xiàn)angular雙向綁定的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了詳解Angular操作cookies方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
對(duì)于一個(gè)Sass用戶(hù),只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下2022-05-05
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
DevUI 是一款面向企業(yè)中后臺(tái)產(chǎn)品的開(kāi)源前端解決方案，它倡導(dǎo)沉浸、靈活、至簡(jiǎn)的設(shè)計(jì)價(jià)值觀，提倡設(shè)計(jì)者為真實(shí)的需求服務(wù)，為多數(shù)人的設(shè)計(jì)，拒絕嘩眾取寵、取悅眼球的設(shè)計(jì)。如果你正在開(kāi)發(fā) ToB 的工具類(lèi)產(chǎn)品，DevUI 將是一個(gè)很不錯(cuò)的選擇！2021-05-05
在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法
這篇文章主要介紹了在Angular項(xiàng)目使用socket.io實(shí)現(xiàn)通信的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
AngularJS學(xué)習(xí)第一篇 AngularJS基礎(chǔ)知識(shí)
這篇文章主要介紹了AngularJS學(xué)習(xí)第一篇，分享了有關(guān)AngularJS的基礎(chǔ)知識(shí)，主要包括指令、過(guò)濾器等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02![解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg9.png)
解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題
今天小編就為大家分享一篇解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09