脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular 实时监听input框value值的变化触发函数

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

您可能感兴趣的文章:

相关文章

  • div实现自适应高度的textarea实现angular双向绑定

    div实现自适应高度的textarea实现angular双向绑定

    本文主要介绍了div实现自适应高度的textarea，实现angular双向绑定的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Angular中ng-options下拉数据默认值的设定方法

    Angular中ng-options下拉数据默认值的设定方法

    本篇文章主要介绍了Angular中ng-options下拉数据默认值的设定方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解Angular操作cookies方法

    详解Angular操作cookies方法

    这篇文章主要介绍了详解Angular操作cookies方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Angular中SASS样式的详细使用教程

    Angular中SASS样式的详细使用教程

    对于一个Sass用户,只需要理解Sass扩展部分如何工作的,就能完全理解SCSS,下面这篇文章主要给大家介绍了关于Angular中SASS样式的详细使用教程,需要的朋友可以参考下
    2022-05-05
  • Angular入口组件（entry component）与声明式组件的区别详解

    Angular入口组件（entry component）与声明式组件的区别详解

    这篇文章主要给大家介绍了关于Angular入口组件（entry component）与声明式组件的区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • angular中如何绑定iframe中src的方法

    angular中如何绑定iframe中src的方法

    这篇文章主要介绍了angular中如何绑定iframe中src的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 如何用DevUI搭建自己的Angular组件库

    如何用DevUI搭建自己的Angular组件库

    DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！
    2021-05-05
  • 在Angular项目使用socket.io实现通信的方法

    在Angular项目使用socket.io实现通信的方法

    这篇文章主要介绍了在Angular项目使用socket.io实现通信的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • AngularJS学习第一篇 AngularJS基础知识

    AngularJS学习第一篇 AngularJS基础知识

    这篇文章主要介绍了AngularJS学习第一篇，分享了有关AngularJS的基础知识，主要包括指令、过滤器等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

    解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

    今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论