ng 监听数据的变化
$scope.$watch('监听的变量的名称',
func)
在angularJs之所以能够实现绑定，是因为angularJS框架在背后为每一个模型数据添加了一个监听，与$watch其实是一个道理。
结果：
代码：
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="kw"/>
</div>
<script>
var app=angular.module('myModule',['ng']);
app.controller('myCtrl',function($scope){ $scope.kw = '';
//监听模型数据的变化
$scope.$watch('kw',
function (newVal,oldVal) {
console.log("newVal is "+newVal+
" oldval is "+oldVal);
})
})
</script> </body>
</html>
例子：通过MVC实现一个SPA，在view有一个textarea（留言本），有一个select（选择颜色rgb）,有一个checkbox(是否同意)，通过$watch监听每一个输入组件的选择结果并通过控制台输出日志信息。
效果：
代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<title></title>
</head>
<body>
<div ng-controller="myCtrl">
请输入留言内容：
<textarea ng-model="user_msg"></textarea>
<br/>
选择喜欢的颜色:
<select ng-model="user_color">
<option value="r">红色</option>
<option value="g">绿色</option>
<option value="b">蓝色</option>
</select>
<br/>
是否同意
<input type="checkbox"
ng-model="user_agree"/>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope) {
console.log('myCtrl func is called');
$scope.user_msg = "";
$scope.user_color='r';
$scope.user_agree = true; $scope.$watch('user_msg', function (newVal,oldVal) {
console.log(newVal);
console.log($scope.user_msg);
}) $scope.$watch('user_color', function () {
console.log($scope.user_color);
}) $scope.$watch('user_agree', function () {
console.log($scope.user_agree);
}) console.log($scope); })
</script>
</body>
</html>
ng 监听数据的变化的更多相关文章
- $watch监听数据变化和run方法
angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- 关于微信小程序使用watch监听数据变化的方法
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
- vue17 $watch 监听数据变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- ionic 监听路由事件变化
(function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
随机推荐
- Zend studio13 导入已有php文件夹
New -> orther -> faceted project 选好对应的文件夹 ,文件夹下的就都导入zend studio了.
- 第一课Linux系统安装知识(1)
在做linux下C\C++开发,首先得安装个Linux系统,这节课记录相关系统安装的知识,本文记录虚拟机安装部分. 在linux系统中,现在一般生手都用桌面版,比如比较多人使用的是 ...
- hadoop17---RPC和Socket的区别
RPC是在Socket的基础上实现的,它比socket需要更多的网络和系统资源.RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台 ...
- Linux设备驱动程序加载/卸载方法 insmod和modprobe命令
linux加载/卸载驱动有两种方法. 1.modprobe 注:在使用这个命令加载模块前先使用depmod -a命令生成modules.dep文件,该文件位于/lib/modules/$(uname ...
- GPU：并行计算利器
http://blog.jobbole.com/87849/ 首页 最新文章 IT 职场 前端 后端 移动端 数据库 运维 其他技术 - 导航条 - 首页 最新文章 IT 职场 前端 - Ja ...
- MySQL-5.7 Insert语句详解
1.语法 INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE] [INTO] tbl_name [PARTITION (partition_ ...
- Mybatis中的ParameterType
mybatis可以传入的参数类型1.基本数据类型 可以通过#{参数名}直接获取.每次只能传入一个值 <select id="selectTeacher" ...
- Nginx 自定义404、500错误页面跳转
自定义Nginx错误界面跳转 1.开启Nginx.conf配置文件下的自定义接口参数. http { fastcgi_intercept_errors on; } 2.在Server区域添加自定义的错 ...
- Spring_通过 FactoryBean 配置 Bean
beans-factorybean.xml <?xml version="1.0" encoding="UTF-8"?><beans xmln ...
- codeforces 738
D: 题意:一行1*n的格子放船只,船数为a,船的长度为b,每格为0或1,1表示该格并不是船只的一部分,找出最少的格子数使得射击这些格子至少能打中一艘船. 思路:船的长度为b,即每段连续的长度为b的0 ...