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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
Angularjs 基础入门
Dec 26 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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
PHP 反射(Reflection)使用实例
2015/05/12 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
bootstrap的工具提示实例代码
2017/05/17 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
详解Django配置优化方法
2019/11/18 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
社区道德讲堂实施方案
2014/03/21 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS