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. select和其元素options

    普通的select形式为: <select> <option>选中元素1</option> <option>选中元素2</option> & ...

  2. 用Dockerfile创建镜像--自动化部署tomcat+mysql+mycat

    https://www.jianshu.com/p/a14b34386b41

  3. Linux-程序包管理

    Linux上的软件安装有2种形式:源码.二进制文件,源码需要在编译环境下编译安装,二进制可以直接安装. 1.程序包管理器 rpm 程序包管理器能够将目标二进制格式(也就是从源码编译好的二进制文件,包括 ...

  4. MVC身份验证及权限管理（转载）

    from https://www.cnblogs.com/asks/p/4372783.html MVC自带的ActionFilter 在Asp.Net WebForm的中要做到身份认证微软为我们提供 ...

  5. GC垃圾回收机制，iOS内存管理。

    问题: MRC中通过调用静态方法创建的新对象,不再使用时需要对其发送release消息吗? 不需要,因为约定静态方法创建的对象会自动将其放入自动释放池,即已对其发送autorelease消息,因此不可 ...

  6. Django 通过 mongoengine 连接 MongoDB 进而使用orm进行CRUD

    一. 在python脚本中, 我们通常可以使用pymongo模块实现与mongodb数据库的交互, 但是在使用Django框架进行定制开发的web server 项目中, 仍然使用pymongo模块的 ...

  7. 第31节：Java基础-类与对象

    前言 Java基础-类与对象,方法的重载,构造方法的重载,static关键字,main()方法,this关键字,包,访问权限,类的继承,继承性,方法的重写,super变量. 方法的重载:成员方法的重载 ...

  8. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  9. 利用nodejs安装并运行express的三个坑

    概述 这是我安装并运行express的三个坑,应该是比较常见的,在此记录一下. 内容 express不是内部或外部命令 输入命令:express -V 报错:'express' 不是内部或外部命令,也 ...

  10. 使用config 来管理ssh的会话

    通常利用 ssh 连接远程服务器,一般都要输入以下类型命令: ssh user@hostname -p port 如果拥有多个ssh账号,特别是像我这种喜欢在终端里直接ssh登录, 要记住每个ssh账 ...