angular 实时监听input框value值的变化触发函数方法


Posted in Javascript onAugust 31, 2018

用angulajs + ionic 做了一个登陆页面。效果要通过监听输入框的变化来判断登陆按钮是否可点击。当至少一个输入框为空时登录按钮不可点击。一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被执行了。

后来经过查找资料,利用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){
    //当value改变时执行的代码
   }
  });
  $scope.$watch('input.Pwd', function(newValue, oldValue) {
   console.log($scope.input.Tel);
   //当value改变时执行的代码
  });

$watch会监听HTML中ng-model绑定的input.Tel,input.Pwd的值与初始化的input对象值作比较。接下来就可以执行你自己的方法了。

以上这篇angular 实时监听input框value值的变化触发函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
javascript表单验证大全
Aug 12 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
BootStrap的双日历时间控件使用
Jul 25 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 #Javascript
Angular2中监听数据更新的方法
Aug 31 #Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 #Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php常用的url处理函数总结
2014/11/19 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
Vue编写多地区选择组件
2017/08/21 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
python pyheatmap包绘制热力图
2018/11/09 Python
详解Python学习之安装pandas
2019/04/16 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
如何基于python实现不邻接植花
2020/05/01 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
高山背包:High Sierra
2017/11/23 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
捐资助学倡议书
2014/04/15 职场文书
离婚财产处理协议书
2014/09/30 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
寒假致家长的一封信
2015/10/10 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书