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 相关文章推荐
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue内置指令详解
Apr 03 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
TP5框架请求响应参数实例分析
2019/10/17 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python+opencv实现动态物体识别
2018/01/09 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
商务邀请函范文
2014/01/14 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
运动会入场词50字
2014/02/20 职场文书
便利店促销方案
2014/02/20 职场文书
毕业生对母校寄语
2015/02/26 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技