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打印纸函数代码(递归)
Jun 18 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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下使用strpos需要注意 === 运算符
2010/07/17 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
华三通信H3C面试题
2015/05/15 面试题
投标承诺书范本
2014/03/27 职场文书
水电施工员岗位职责
2015/04/11 职场文书
成绩单家长意见
2015/06/03 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书