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 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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实现mysql数据库操作类分享
2014/02/14 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
layui实现三级联动效果
2019/07/26 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
团队精神演讲稿
2013/12/31 职场文书
办公室主任先进事迹
2014/01/18 职场文书
岗位职责风险点
2014/03/12 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
网络营销计划
2015/01/17 职场文书
创业的9条正确思考方式
2019/08/26 职场文书