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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jquery操作angularjs对象
Jun 26 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 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部分常见问题总结
2006/10/09 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015中学政教处工作总结
2015/07/22 职场文书