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 相关文章推荐
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
深入探究node之Transform
Jul 20 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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中大括号作用介绍
2012/03/22 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
JS求平均值的小例子
2013/11/29 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python实现AES加密和解密
2019/03/27 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python字符串格式化方式解析
2019/10/19 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python 支持向量机分类器的实现
2020/01/15 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
写好自荐信的要点
2013/11/06 职场文书
企业法人代表任命书
2014/06/06 职场文书
设计大赛策划方案
2014/06/13 职场文书
总经理检讨书
2014/09/15 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
创业计划书之农家乐
2019/10/09 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
php实例化对象的实例方法
2021/11/17 PHP
JavaScript设计模式之原型模式详情
2022/06/21 Javascript