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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
AngularJs表单验证实例详解
May 30 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
seajs下require书写约定实例分析
May 16 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 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
星际RPG字典
2020/03/04 星际争霸
支持oicq头像的留言簿(一)
2006/10/09 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
JS重要知识点小结
2011/11/06 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中的迭代器漫谈
2015/02/03 Python
Python selenium文件上传方法汇总
2020/11/19 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
旷课检讨书2000字
2014/01/14 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
主管竞聘书范文
2014/03/31 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年暑假生活总结
2015/07/13 职场文书