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 去代替 ...
随机推荐
- loc、iloc、ix比较
使用pandas创建一个对象 In [1]: import pandas as pd In [2]: import numpy as np In [3]: df = pd.DataFrame(np.r ...
- python数据类型及其操作
一.数字 常用类型:int,float age = 10 # int型 salary = 3000.5 # float型 进制: 二进制: 11 = 1*21 + 1*20 = 3 八进制: 11 ...
- Loadrunder场景设计篇——定时器(schedule)
A. 定义方案schedule 在 Scenario Schedule面板中,选择一个方案schedule,或通过点击New Schedule定义一个新的方案 定义schedule: a.新建sc ...
- Set,List,Map的区别
最近在学习struct2中OGNL表达式的过程中,发现自己对set,list,map存在只是欠缺,在百度的过程中发现了此文觉得讲的不错,放到自己博客以便再次查阅,也希望更多地菜鸟看到. java集合的 ...
- CSS小知识---table表格
所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> < ...
- 对Java 注解的一些理解
转载自https://blog.csdn.net/javazejian/article/details/71860633 引入 注解最简单的使用方式 Java注解与普通修饰符(public\stati ...
- sq 如何创建全局的临时表。
全局临时表的生命周期一直持续到创建会话(不是创建级别)才终止.例如,如果你在存储过程中创建全局临时表,当超出存储过程的范围时,该表并不会被销毁.当创建会话终止后,SQL Server才会自动尝试删除该 ...
- ASP.NET MVC CheckBoxFor的int to bool
当我们使用CheckBoxFor类型需要使用bool ,可以将 int转换成bool <div class="form-group"> <label class= ...
- dubbo应用
一.安装配置 cd /usr/local/ wget http://www.apache.org/dist/zookeeper/zookeeper-3.4.6/zookeeper-3.4.6.tar. ...
- MySQL5.7导入数据报错ERROR 1067 (42000) at line 1015: Invalid default value for 'service_time'
解决办法: 修改my.cnf,[mysqld] 下面添加sql_mode=STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_U ...