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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JS定时器实例
Apr 17 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php单例模式示例分享
2015/02/12 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
python定时执行指定函数的方法
2015/05/27 Python
python tornado微信开发入门代码
2018/08/24 Python
python简单贪吃蛇开发
2019/01/28 Python
python如何实现数据的线性拟合
2019/07/19 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python lambda的使用详解
2021/02/26 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
今冬明春火灾防控工作方案
2014/05/29 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
MySQL的Query Cache图文详解
2021/07/01 MySQL