$scope.$watch('监听的变量的名称',
func)

在angularJs之所以能够实现绑定，是因为angularJS框架在背后为每一个模型数据添加了一个监听，与$watch其实是一个道理。

结果：

代码：

  1. <html ng-app="myModule">
  2. <head lang="en">
  3.     <meta charset="UTF-8">
  4.     <script src="js/angular.js"></script>
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div ng-controller="myCtrl">
  9.         <input type="text" ng-model="kw"/>
  10.     </div>
  11. <script>
  12.     var app=angular.module('myModule',['ng']);
  13.     app.controller('myCtrl',function($scope){
  14.  
  15.         $scope.kw = '';
  16.         //监听模型数据的变化
  17.         $scope.$watch('kw',
  18.             function (newVal,oldVal) {
  19.                 console.log("newVal is "+newVal+
  20.             " oldval is "+oldVal);
  21.         })
  22.     })
  23. </script>
  24.  
  25. </body>
  26. </html>

例子：通过MVC实现一个SPA，在view有一个textarea（留言本），有一个select（选择颜色rgb）,有一个checkbox(是否同意)，通过$watch监听每一个输入组件的选择结果并通过控制台输出日志信息。

效果：

代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <script src="js/angular.js"></script>
  6.   <title></title>
  7. </head>
  8. <body>
  9. <div ng-controller="myCtrl">
  10.   请输入留言内容：
  11.   <textarea ng-model="user_msg"></textarea>
  12.   <br/>
  13.   选择喜欢的颜色:
  14.   <select ng-model="user_color">
  15.     <option value="r">红色</option>
  16.     <option value="g">绿色</option>
  17.     <option value="b">蓝色</option>
  18.   </select>
  19.   <br/>
  20.   是否同意
  21.   <input type="checkbox"
  22.          ng-model="user_agree"/>
  23. </div>
  24. <script>
  25.   var app = angular.module('myApp', ['ng']);
  26.   app.controller('myCtrl', function ($scope) {
  27.     console.log('myCtrl  func is called');
  28.     $scope.user_msg = "";
  29.     $scope.user_color='r';
  30.     $scope.user_agree = true;
  31.  
  32.     $scope.$watch('user_msg', function (newVal,oldVal) {
  33.       console.log(newVal);
  34.       console.log($scope.user_msg);
  35.     })
  36.  
  37.     $scope.$watch('user_color', function () {
  38.       console.log($scope.user_color);
  39.     })
  40.  
  41.     $scope.$watch('user_agree', function () {
  42.       console.log($scope.user_agree);
  43.     })
  44.  
  45.     console.log($scope);
  46.  
  47.   })
  48. </script>
  49. </body>
  50. </html>

ng 监听数据的变化的更多相关文章

  1. $watch监听数据变化和run方法

    angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...

  2. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  3. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  4. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  5. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

  6. vue17 $watch 监听数据变化

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

  7. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  8. ionic 监听路由事件变化

    (function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...

  9. MutationObserver 监听DOM树变化

    1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...

随机推荐

  1. cdoj1334郭大侠与Rabi-Ribi

    地址:http://acm.uestc.edu.cn/#/problem/show/1334 题目: 郭大侠与Rabi-Ribi Time Limit: 3000/1000MS (Java/Other ...

  2. C#基础--应用程序域(Appdomain)

    AppDomain理解 为了保证代码的键壮性CLR希望不同服务功能的代码之间相互隔离,这种隔离可以通过创建多个进程来实现,但操作系统中创建进程是即耗时又耗费资源的一件事,所以在CLR中引入了AppDo ...

  3. 【Java】仿真qq尝试：用户注册（三）

    需求: 实现用户名和密码存入数据库. 思路: 1.连接数据表用静态加载块 2.crud写成4个静态方法 具体流程: from:https://www.tutorialspoint.com/jdbc/j ...

  4. MLP(多层神经网络)介绍

    写在前面的 接触神经网络(ANN)的时间很长了,以前也只是学了学原理,做过一个BPN的练习,没有系统的总结过,最近看Torch的源码,对MLP有了更多的了解,写写自己学到的东西吧,算是做了一次总结! ...

  5. tinyxml优化之一

    原文链接:http://www.cnblogs.com/zouzf/p/4154569.html 最近在搞XML解析优化,公司引擎用了tinyxml1和tinyxml2两个XML库,后者的效率比前者高 ...

  6. React Native之Fetch简单封装、获取网络状态

    1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...

  7. [POI2012] BEZ-Minimalist Security

    一张n个点m条边的无向图,有点权有边权都是非负,且每条边的权值小于等于两个顶点的权值和,现在要将每个点减一个非负整数使得每条边权等于两个顶点的点权和,问最大修改代价和最小修改代价 思路神的一匹,完全想 ...

  8. 并发-Synchronized底层优化（偏向锁、轻量级锁）

    Synchronized底层优化(偏向锁.轻量级锁) 参考: http://www.cnblogs.com/paddix/p/5405678.html 一.重量级锁 上篇文章中向大家介绍了Synchr ...

  9. bzoj 1050: [HAOI2006]旅行comf(codevs.cn 1001 舒适的路线) 快排+并查集乱搞

    没用的话:好像很久没发博客了,主要是懒太蒟找不到水题.我绝对没弃坑...^_^ 还用些话:本文为博主原创文章,若转载请注明原网址和作者. 进入正题: 先pa网址: bzoj :http://www.l ...

  10. LeetCode——Find the Difference

    LeetCode--Find the Difference Question Given two strings s and t which consist of only lowercase let ...