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 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 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
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python处理大数字的方法
2015/05/27 Python
python实现月食效果实例代码
2019/06/18 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python求质数列表的例子
2019/11/24 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python是什么 Python的用处
2020/05/26 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
法人委托书
2014/07/31 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
机关作风建设整改方案
2014/10/27 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript