$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 监听数据的变化的更多相关文章

  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. 从零到一创建ionic移动app：应用anjularjs编写ionic项目

    推荐两篇文章,带你入门 ionic中文项目(作为了解ionic基础结构用):http://blog.csdn.net/i348018533/article/details/47258449/ ioni ...

  2. 怎么理解TCP的面向连接和UDP的无连接（不面向连接）？

    TCP关心分组是否准确送达,甚至仔细到给每个分组编号并收到目的端的确认“我已经收到啦~你继续发~”才继续发送后续的分组,而UDP则不然,它只负责把分组封装好后直接发送到链路上,至于目的端收到与否并不关 ...

  3. HDFS 详解

    HDFS 概述 基于2.7.3 HDFS 优点: 1.高容错性 数据自动保存多个副本,默认是三个副本 副本丢失后,会自动恢复 2.适合批处理 移动计算而非移动数据,批处理的时候,数据量很大,移动数据是 ...

  4. 优秀 H5 案例收集 Vol.2（不定期更新）

    上期浏览:Vol.1 再见了,影史最性感的硬汉http://news.163.com/special/fdh5_wolverine/ 活出真我http://balfhcy.pernod-ricard- ...

  5. 利用ST MCU内部的基准参考电压监测电源电压及其它

    源: 利用ST MCU内部的基准参考电压监测电源电压及其它

  6. VRChat简易教程2-创建一个最基本的世界（world）

    一.准备工作 1 先确保你安装了unity并导入了sdk 教程:https://www.cnblogs.com/cation/p/10311702.html 2 按之前的教程新建一个project并导 ...

  7. 记一次网卡报错ERROR,some other host already uses address

    提示IP地址冲突,但是此IP确实没有被其他Server占用 解决如下: 编辑此文件 搜索arping 将下面几行注释掉 保存退出 激活网卡 此时IP地址已生效 下面是我的系统版本 (一般应该不会出现这 ...

  8. 深入理解JVM 垃圾收集器(上）

    HotSpot虚拟机中的垃圾收集器 GC评价标准 GC调优 响应时间 吞吐量 1.新生代收集器 Serial收集器 ParNew收集器 Parallel Scavenge收集器 2.老年代收集器 Se ...

  9. HDU 1263 二维map

    题意:给出一份水果的交易表,根据地区统计出水果的交易情况.   思路:二维map使用.   #include<cstdio> #include<string> #include ...

  10. IE6+以上清除浮动普遍方法总结

    浮动,CSSfloat属性.学过的人应该知道这个属性,平时用的应该也是很多的.特别是在N栏布局中. 但是我们会经常遇到这样一种情况,前面的元素浮动之后会影响后面的元素,后面的元素需要用清除浮动来消灭前 ...