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 null和undefined区别分析
Oct 14 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python流程控制 if else实现解析
2019/09/02 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
夫妻婚内购房协议书
2014/10/05 职场文书
邀请函格式范文
2015/02/02 职场文书
民事起诉书范本
2015/05/19 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python