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. Shell脚本-基本运算符

    跟着RUNOOB网站的教程学习的笔记 shell和其他编程语言一样,支持多种运算符,包括: 算术运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 expr是一款表达式计算公式,使用它能完成 ...

  2. 学以致用二十四-----shell脚本中的列表及space

    1.接触列表的概念是在pyhon中,殊不知在shell中也是有列表的. 如: 结果 列表的下标和python中一样,也是以0开头 注意 list 和list2 的区别   一个是用括号括起来,一个是用 ...

  3. java易错题

    (选择二项) 8 A: B: C: D: (选择一项) 9 A: B: C: D: 正确答案是 A 您回答的是 B 回答错误 正确答案是 B,D 您回答的是 A,C 回答错误 (选择一项) 18 A: ...

  4. 获取input标签中file的内容

    1.直接获取文件中的内容: <form id="form" method="post" enctype="multipart/form-data ...

  5. okhttp 调用相机 上传服务器

    MainActivity package com.bwie.lianxi1; import android.content.Intent; import android.database.Cursor ...

  6. canvas 旋转

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Java连接MySQL数据库详细教程（附网盘下载地址）

    准备工具 Eclipse-oxygen-64位 http://pan.baidu.com/s/1gf48FIj MySQL-5.7.17 http://pan.baidu.com/s/1skD14Cl ...

  8. 提高Linux运维效率的命令行常用快捷键

    提高Linux运维效率的命令行常用快捷键 tab 命令或路径等的补全键,Linux最有用快捷键 Ctrl+a 光标回到命令行首 Ctrl+e 光标回到命令行尾 Ctrl+k 剪切(删除)光标处到行尾的 ...

  9. 3.装配Bean 基于XML

    一.实例化方式 3种bean实例化方式:默认构造.静态工厂.实例工厂 1.默认构造 <bean id="" class=""> 必须提供默认构造 2 ...

  10. nginx访问问题

    root响应的路径:配置的路径(root指向的路径)+完整访问路径(location的路径)+静态文件alias响应的路径:配置路径+静态文件(去除location中配置的路径)