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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
简单实现js拖拽效果
Jul 25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python Json数据文件操作原理解析
2020/05/09 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
检查接待方案
2014/02/27 职场文书
挂牌仪式主持词
2014/03/20 职场文书
教师业务培训方案
2014/05/01 职场文书
匿名信格式范文
2015/05/27 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle