angularjs通过ng-change和watch两种方式实现对表单输入改变的监控
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两种方式实现对表单输入改变的监控的更多相关文章
- 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak
1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...
- Python与数据库[2] -> 关系对象映射/ORM[2] -> 建立声明层表对象的两种方式
建立声明层表对象的两种方式 在对表对象进行建立的时候,通常有两种方式可以完成,以下是两种方式的建立过程对比 首先导入需要的模块,获取一个声明层 from sqlalchemy.sql.schema i ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- 传递引用类型参数的两种方式(转自 MSDN)
引用类型的变量不直接包含其数据:它包含的是对其数据的引用.当通过值传递引用类型的参数时,有可能更改引用所指向的数据,如某类成员的值(更改属性的值),但是无法更改引用本身的值:也就是说,不能使用相同的引 ...
- 不停止MySQL服务增加从库的两种方式
不停止MySQL服务增加从库的两种方式 转载自:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产环境MySQL数据库是一主一从,由于业务量访 ...
- curl文件上传有两种方式,一种是post_fileds,一种是infile
curl文件上传有两种方式,一种是POSTFIELDS,一种是INFILE,POSTFIELDS传递@实际地址,INFILE传递文件流句柄! );curl_setopt($ch, CURLOPT_PO ...
- 云服务器 ECS Linux 服务器修改时区的两种方式
在云服务器 ECS Linux 系统中,以 Centos6.5 为例,可以通过如下两种方式,修改系统时区: 可以使用命令 tzselect,修改时区.操作示例: [root@localhost ~]# ...
- 不停止MySQL服务增加从库的两种方式【转载】
现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...
- Android中EditText显示明文与密文的两种方式
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录输入框显示.隐藏密码的简单布局以及实现方式. 效果图 代码分析 方式一 /**方式一:*/ private void sh ...
随机推荐
- Pattern Design - Strategy Pattern
If you can disassemble code and you want to apply one method of an object in another object that t ...
- Ocelot使用
1.在网关项目中通过nuget引入Ocelot 2.Startup.cs文件代码调整 using System; using System.Collections.Generic; using Sys ...
- WITH RECOMPILE 和 OPTION(RECOMPILE) 使用上的区别
在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的其他因素的情况下,比如重建索引,更新统计信息等等), 一是基于WITH RECOMPILE的存储过程级 ...
- AJAX从入门到放弃(一)
AJAX可以用于创建快速动态的网页(无需重新加载整个网页的情况下,能够更新部分网页的技术) 即异步的Javascript和XML,通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新. A ...
- grid布局学习二之子元素(项目)
/* grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-r ...
- ACM知识点分类
(知识点分类.看完想(╯‵□′)╯︵┻━┻) orz...一点点来吧.简单标记一下. 蓝色,比较熟悉,能够做. 蓝绿色,一般熟悉,需要加强 红色,(比个辣鸡.jpg) (标记完突然想打人...) 第一 ...
- ie被hao.360劫持的解决方法
概述 之前无意中发现ie被hao.360劫持了,只要打开网址就会跳到hao.360,然后显示网络错误.网上试了几种解决方法,都不行,最后被我用重置ie浏览器的方法解决了.我总结了一下,把各种方案都记下 ...
- jdk的安装和配置环境变量
一.下载 JDK是个免费的东东,所以大家不要去百度啥破解版了,直接去官网下载最新版本吧,比较安全,官网地址:http://www.oracle.com/technetwork/java/index.h ...
- Could not load file or assembly Microsoft.SqlServer.management.sdk.sfc version 11.0.0.0
I have installed MS SQL Server 2012 R2 and when I try to update model from database under EDMX file ...
- git关于文件权限修改引起的冲突及忽略文件权限的办法
我们在使用git进行版本管理的时候,有时候只是修改了文件的权限,比如将pack.php修改为777,但其实文件内容并没有改变,但是git会认为此文件做了修改,原因是git把文件权限也算作文件差异的一部 ...