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通过ng-change和watch两种方式实现对表单输入改变的监控的更多相关文章

  1. 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak

    1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...

  2. Python与数据库[2] -> 关系对象映射/ORM[2] -> 建立声明层表对象的两种方式

    建立声明层表对象的两种方式 在对表对象进行建立的时候,通常有两种方式可以完成,以下是两种方式的建立过程对比 首先导入需要的模块,获取一个声明层 from sqlalchemy.sql.schema i ...

  3. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

  4. 传递引用类型参数的两种方式（转自 MSDN）

    引用类型的变量不直接包含其数据:它包含的是对其数据的引用.当通过值传递引用类型的参数时,有可能更改引用所指向的数据,如某类成员的值(更改属性的值),但是无法更改引用本身的值:也就是说,不能使用相同的引 ...

  5. 不停止MySQL服务增加从库的两种方式

    不停止MySQL服务增加从库的两种方式 转载自:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产环境MySQL数据库是一主一从,由于业务量访 ...

  6. curl文件上传有两种方式，一种是post_fileds，一种是infile

    curl文件上传有两种方式,一种是POSTFIELDS,一种是INFILE,POSTFIELDS传递@实际地址,INFILE传递文件流句柄! );curl_setopt($ch, CURLOPT_PO ...

  7. 云服务器 ECS Linux 服务器修改时区的两种方式

    在云服务器 ECS Linux 系统中,以 Centos6.5 为例,可以通过如下两种方式,修改系统时区: 可以使用命令 tzselect,修改时区.操作示例: [root@localhost ~]# ...

  8. 不停止MySQL服务增加从库的两种方式【转载】

    现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...

  9. Android中EditText显示明文与密文的两种方式

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录输入框显示.隐藏密码的简单布局以及实现方式. 效果图    代码分析 方式一 /**方式一:*/ private void sh ...

随机推荐

  1. ABP框架系列之三十四：(Multi-Tenancy-多租户)

    What Is Multi Tenancy? "Software Multitenancy refers to a software architecture in which a sing ...

  2. 如何搭建zabbix server端

    1.背景介绍: nginx:1.9.3 安装路径/data/nginxphp:5.5.27 安装路径 /data/phpmysql:5.6.28 安装路径/usr/local/mysqlzabbix ...

  3. noip第16课资料

  4. 利用Go2Shell 实现 Mac Finder 直接shell端打开当前文件夹

    Finder 窗口 ,点击下图所示的按钮(红色框内),即可打开Shell Terminal. 打开后,如图 用法 安装go2shell后,打开finder的application文件夹,找到go2sh ...

  5. 剑指offer编程题Java实现——面试题8旋转数组的最小数字

    剑指offer面试题8:旋转数组的最小数字 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1, ...

  6. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  7. 拷问传统企业CIO：微服务化值得吗？

    所谓数字化转型升级,就是以数字技术优化传统资源,企业需要谨慎地选择合适的技术逐步完成自己的数字化战略.以推出轻舟微服务平台的网易云为代表,云计算公司正在微服务领域发力,促进企业数字化创新.那么,微服务 ...

  8. react中使用阿里Viser图表

    参考demo的codesandbox:https://codesandbox.io/s/kxxxx3w5kv 使用步骤:   1. 安装依赖  viser-react和@antv/data-set 2 ...

  9. Elasticsearch 自定义多个分析器

    分析器(Analyzer) Elasticsearch 无论是内置分析器还是自定义分析器,都由三部分组成:字符过滤器(Character Filters).分词器(Tokenizer).词元过滤器(T ...

  10. 【Spark调优】数据本地化与参数调优

    数据本地化对于Spark Job性能有着巨大的影响,如果数据以及要计算它的代码是在一起的,那么性能当然会非常高.但是,如果数据和计算它的代码是分开的,那么其中之一必须到另外一方的机器上.移动代码到其匹 ...