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对象弹出一个层
Mar 26 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
js实现一键复制功能
Mar 16 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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使用数组填充下拉列表框的方法
2015/03/31 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python import自定义模块方法
2015/02/12 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python多线程下信号处理程序示例
2019/05/31 Python
python字符串判断密码强弱
2020/03/18 Python
大学毕业通用个人的求职信
2013/12/08 职场文书
物业门卫岗位职责
2013/12/28 职场文书
电气工程师岗位职责
2014/01/01 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python