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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
react+redux仿微信聊天界面
Jun 21 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
js实现跳一跳小游戏
Jul 31 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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
django 单表操作实例详解
2019/07/30 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
2014年教师党员公开承诺书
2014/05/28 职场文书
体育运动口号
2014/06/09 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015年路政工作总结
2015/05/22 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
Windows server 2012搭建FTP服务器
2022/04/29 Servers