angularjs实现对表单输入改变的监控(ng-change和watch两种方式)


Posted in Javascript onAugust 29, 2018

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

直接上练习代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
  <div>
    <h1>ng-change指令</h1>
    ng-change指令,当表单输入发生改变时,会触发该事件<br />
    <div>
      姓名:<input type="text" id="name1" ng-model="user.name"
        placeholder="请输入姓名" ng-change="inputChange()" />
    </div>
    <div>
      年龄:<input type="number" ng-model="user.age"
        placeholder="请输入年龄" ng-change="inputChange()" />
    </div>
    <div>{{user.message}}</div>
  </div>
  <div>
    <h1>通过监听改变达到和ng-chang一样的效果</h1>
    <div>
      姓名:<input type="text" id="name2" ng-model="user2.name"
        placeholder="请输入姓名" />
    </div>
    <div>
      年龄:<input type="number" ng-model="user2.age"
        placeholder="请输入年龄" />
    </div>
    <div>{{user2.message}}</div>
  </div>
</body>
</html>
<script src="../JS/angular.js"></script>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("myContro", function ($scope, $interpolate) {
    $scope.user = {
      name: "",
      age: "",
      message: ""
    };
    $scope.user2 = {
      name: "",
      age: "",
      message: ""
    };
    $scope.messageTemp = "{{name}},您好,您今年{{age}}岁啦!";
    var template = $interpolate($scope.messageTemp);
    $scope.inputChange = function () {
      $scope.user.message = template({ name: $scope.user.name, age: $scope.user.age });
    };
    //// 下面通过watch监听实现ng-change一样的效果
    $scope.$watch("user2.name", function (newValue, oldValue) {
      $scope.getMessage(newValue, oldValue);
    });
    $scope.$watch("user2.age", function (newValue, oldValue) {
      $scope.getMessage(newValue, oldValue);
    });
    $scope.getMessage = function (value1, value2) {
      if (value1 != value2) {
        $scope.user2.message = template({ name: $scope.user2.name, age: $scope.user2.age });
      }
    }
  });
</script>

总结

以上所述是小编给大家介绍的angularjs实现对表单输入改变的监控,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jQuery选择器全集详解
Nov 24 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
详解javascript函数的参数
Nov 10 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
深入理解js数组的sort排序
May 28 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
JS实现数组的增删改查操作示例
Aug 29 #Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 #Javascript
vue-cli3.0使用及部分配置详解
Aug 29 #Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 #Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 #Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 #Javascript
You might like
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python 多个参数不为空校验方法
2019/02/14 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python 实现目录复制的三种小结
2019/12/04 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
详解python如何引用包package
2020/06/07 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python破解同事的压缩包密码
2020/10/14 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
优秀党员获奖感言
2014/02/18 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
规划编制实施方案
2014/03/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python