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中的prototype属性实例分析说明
Aug 09 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php自动获取目录下的模板的代码
2010/08/08 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
javascript数据类型详解
2017/02/07 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python安装教程
2018/02/28 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
创意广告词
2014/03/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
社区文化建设方案
2014/05/02 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
驻村工作简报
2015/07/20 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python