angular 实时监听input框value值的变化触发函数方法

 更新时间:2018年08月31日 11:09:59   作者:返回主页 wjw_Dream  
今天小编就为大家分享一篇angular 实时监听input框value值的变化触发函数方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

用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值的变化触发函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • AngularJs验证重复密码的方法(两种)

    AngularJs验证重复密码的方法(两种)

    本文给大家介绍angularjs验证重复密码的两种方法,每种方法都有各自的优缺点,大家可以根据需要选择一种方法,具体内容详情大家通过本文详细了解下吧
    2016-11-11
  • 详解Angular 4.x Injector

    详解Angular 4.x Injector

    本篇文章主要介绍了Angular 4.x Injector,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • AngularJS入门教程之链接与图片模板详解

    AngularJS入门教程之链接与图片模板详解

    本文主要介绍 AngularJS 链接与图片模板的知识,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
    2016-08-08
  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验

    详解AngularJs HTTP响应拦截器实现登陆、权限校验

    本篇文章主要介绍了AngularJs HTTP响应拦截器实现登陆、权限校验,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • angularjs实现上拉加载和下拉刷新数据功能

    angularjs实现上拉加载和下拉刷新数据功能

    本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS使用拦截器实现的loading功能完整实例

    AngularJS使用拦截器实现的loading功能完整实例

    这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下
    2017-05-05
  • Angular模版驱动表单的使用总结

    Angular模版驱动表单的使用总结

    这篇文章主要介绍了Angular模版驱动表单的使用总结,本文实现了Angular支持表单的双向数据绑定,校验,状态管理,非常具有实用价值,需要的朋友可以参考下
    2018-05-05
  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    这篇文章主要给大家介绍了关于如何使用RxJS更优雅地进行定时请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用RxJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 浅谈angular4生命周期钩子

    浅谈angular4生命周期钩子

    本篇文章主要介绍了浅谈angularr4生命周期钩子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • angular+webpack2实战例子

    angular+webpack2实战例子

    本篇文章主要介绍了angular+webpack2实战例子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论