angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
用angulajs + ionic 做了一個(gè)登陸頁面。效果要通過監(jiān)聽輸入框的變化來判斷登陸按鈕是否可點(diǎn)擊。當(dāng)至少一個(gè)輸入框?yàn)榭諘r(shí)登錄按鈕不可點(diǎn)擊。一開始是用的jquery的方法做的，后來發(fā)現(xiàn)刷新當(dāng)前頁可以實(shí)現(xiàn)效果，但是當(dāng)經(jīng)過路由跳轉(zhuǎn)后再回到登陸頁后，方法就被執(zhí)行了。
后來經(jīng)過查找資料，利用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)聽HTML中ng-model綁定的input.Tel，input.Pwd的值與初始化的input對(duì)象值作比較。接下來就可以執(zhí)行你自己的方法了。
以上這篇angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
本文給大家介紹angularjs驗(yàn)證重復(fù)密碼的兩種方法，每種方法都有各自的優(yōu)缺點(diǎn)，大家可以根據(jù)需要選擇一種方法，具體內(nèi)容詳情大家通過本文詳細(xì)了解下吧2016-11-11
本篇文章主要介紹了Angular 4.x Injector，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹 AngularJS 鏈接與圖片模板的知識(shí)，這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-08-08
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
angularjs實(shí)現(xiàn)上拉加載和下拉刷新數(shù)據(jù)功能
本篇文章主要介紹了angularjs實(shí)現(xiàn)上拉加載和下拉刷新數(shù)據(jù)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJS使用攔截器實(shí)現(xiàn)的loading功能完整實(shí)例
這篇文章主要介紹了AngularJS使用攔截器實(shí)現(xiàn)的loading功能,結(jié)合完整實(shí)例形式分析了AngularJS攔截器的設(shè)置、調(diào)用及l(fā)oading功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié)，本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗(yàn)，狀態(tài)管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求詳析
這篇文章主要給大家介紹了關(guān)于如何使用RxJS更優(yōu)雅地進(jìn)行定時(shí)請(qǐng)求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用RxJS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了淺談angularr4生命周期鉤子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
angular+webpack2實(shí)戰(zhàn)例子
本篇文章主要介紹了angular+webpack2實(shí)戰(zhàn)例子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05