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. day_2安装Python解释器和pycharm

    首先我们复习一下昨天的内容 ···重点 1:进制转换:二进制 与 十六进制 1111  0101 1010 转换为 f5a 2:内存分布:堆区 和 栈区 计算机的原理: 控制器 运算器 存储器 inp ...

  2. bash编程-Shell变量

    bash中,所有变量的值默认均为字符串. 1. 变量操作 调用变量 $变量 查看变量(所有类型) set 删除变量 unset 变量 2. 变量分类 2.1 自定义变量 自定义变量仅对当前Shell有 ...

  3. bootstrap的化妆页面

    Glyphicons 字体图标 所有可用的图标 包括260个来自 Glyphicon Halflings 的字体图标.Glyphi cons Halflings 一般是收费的,但是他们的作者允许 Bo ...

  4. ZZ：git只clone仓库中指定子目录和指定文件的实现

    原文链接: http://blog.csdn.net/xuyaqun/article/details/49275477 git目前唯一不能实现的是:不能像svn那样,针对子目录设置权限,这与git分布 ...

  5. struts2框架学习笔记4：获取参数

    第一种参数获取方式: 编写一个前端页面,提交表单,做示例: <form action="${pageContext.request.contextPath}/Demo1Action&q ...

  6. JAVA基础语法——标识符、修饰符、关键字（个人整理总结）

    JAVA基础语法——标识符.修饰符.关键字 一 . 标识符 1.1    什么是标识符 就是程序员在定义java程序时,自定义的一些名字,例如helloworld 程序里关键字class 后跟的Dem ...

  7. Java 项目UML反向工程转化工具

    今天在看一个模拟器的源码,一个包里有多个类,一个类里又有多个属性和方法,如果按顺序看下来,不仅不能对整个模拟器的框架形成一个大致的认识,而且只会越看越混乱,所以,想到有没有什么工具可以将这些个类以及它 ...

  8. Spring Boot Starters启动器

    Starters是什么? Starters可以理解为启动器,它包含了一系列可以集成到应用里面的依赖包,你可以一站式集成Spring及其他技术,而不需要到处找示例代码和依赖包.如你想使用Spring J ...

  9. 橙色优学：2019年设计行业怎么样？UI设计行业前景分析

    互联网的飞速发展带动了UI行业的火爆,成为时下最热门的高新技术行业.UI设计区别于传统的平面设计,更加注重界面.交互.体验等方面,这使UI设计变为了高薪的行业,对设计师的技能要求也就变得更加严格. 自 ...

  10. Linux shell逐行读取文件的方法

    方法1:while循环中执行效率最高,最常用的方法. function while_read_line_bottom(){ while read line do echo $line done < ...