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-serialize()输出序列化form表单值的方法
Dec 26 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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
域名查询代码公布
2006/10/09 PHP
Banner程序
2006/10/09 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python使用epoll实现服务端的方法
2018/10/16 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python sep参数使用方法详解
2020/02/12 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
销售人员求职的自我评价分享
2014/03/15 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
礼仪培训心得体会
2016/01/22 职场文书
高二数学教学反思
2016/02/18 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers