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. Awesome Python 中文版

    Awesome Python ,这又是一个 Awesome XXX 系列的资源整理,由 vinta 发起和维护.内容包括:Web框架.网络爬虫.网络内容提取.模板引擎.数据库.数据可视化.图片处理.文 ...

  2. Linux 第四天

    1.文件搜索命令 1)locate 在文件资料库中查找文件(需要文件资料库中有,新建的文件查不到,需要手动更新,updatedb.查不到/tmp目录下的文件) 语法:locate 文件名 常用选项: ...

  3. mysql data type <----> java data type (数值）

    https://dev.mysql.com/doc/refman/5.7/en/storage-requirements.html +----------------------------+---- ...

  4. 其于OpenXml SDK写的帮助类

    /// <summary> /// 其于OpenXml SDK写的帮助类 /// </summary> public static class OpenXmlHelper { ...

  5. jsp和html的区别

    html是超文本标记语言,只要有浏览器,就可以显示出来了. jsp是java server page就是在java服务器端的页面,需要通过jdk的编译才可以显示在客户端的浏览器上. 不仅如此,jsp还 ...

  6. Delphi - 子窗体继承父窗体后如何显示父窗体上的控件

    1.创建子窗体Form1 File -> New -> Form,新建一个form,在form的单元文件中修改 2.子窗体中引用父窗体单元 uses TFatherForm 3.将子窗体中 ...

  7. poj3280

    将给定字符串用最小代价(添加,删除)变为回文串. dp:dp[i][j]表示将i-j变为回文串的最小代价. 若s[i]==s[j],则dp[i][j]=dp[i+1][j-1] 否则,若s[i+1]- ...

  8. redis 实现发布订阅的功能

    redis 除了作为缓存的功能外还可以用作消息中间件的功能,这片博客主要是介绍一下 redis 整合spring 实现消息的发布和订阅功能: 1:redis依赖,依赖两个包,redis 包, spri ...

  9. javascript Navigator对象属性和方法

    Navigator对象 Navigator 对象包含的属性描述了正在使用的浏览器.可以使用这些属性进行平台专用的配置.虽然这个对象的名称显而易见 的是 Netscape 的 Navigator 的浏览 ...

  10. Docker - 国内镜像的配置及使用

    Docker国内镜像 DaoCloud - Docker加速器 阿里云 - 开发者平台 微镜像 - 希云cSphere 网易蜂巢 阿里云的Docker加速器 阿里云 - 开发者平台:https://d ...