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 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
js 操作符实例代码
Oct 24 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
layer弹出层取消遮罩的方法
Sep 25 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
微信小程序实现列表左右滑动
Nov 19 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递归列出所有文件和目录的代码
2008/09/10 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Django中处理出错页面的方法
2015/07/15 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
详解Python中的文件操作
2016/08/28 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python对日志进行处理的实例代码
2018/10/06 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
教师的实习鉴定
2013/12/15 职场文书
个人对照检查材料
2014/02/12 职场文书
精神病医院见习报告
2014/11/03 职场文书
环境卫生整治简报
2015/07/20 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android