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 相关文章推荐
列表内容的选择
Jun 30 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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/12/05 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
javascript日期格式化示例分享
2014/03/05 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python图像处理入门(一)
2019/04/04 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
教师评语大全
2014/04/28 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
大学生求职信
2014/06/17 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python