关于angular js_$watch监控属性和对象详解


Posted in Javascript onApril 24, 2017

$Watch:(监听一个model,当一个model每次改变时,都会触发第二个函数)

$watch('watchFn',watchAction,deepWatch)

watchFn:带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值。

watchAction: 一个函数function(newValue,oldValue){},当watchFn 发生变化时会被调用

deepWatch:默认为false,监听数组的某个元素或者对象的属性时设置为true;

监控一个属性:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <div class="form-group">
      <input ng-model="name" />{{name}}
      <p>改变次数{{count}}</p>
    </div>
  </form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope){
    $scope.name = '橘子';
    $scope.count = 0;
    $scope.$watch('name', function (newValue, oldValue) {
      $scope.count++;
      if($scope.count >5){
        $scope.name = '苹果';
      }
    });
  });
</script>
</body>
</html>

监控一个对象(deepWidth为true)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    <div class="form-group">
      <input ng-model="Data.name" />{{Data.name}}
      <p>改变次数{{count}}</p>
    </div>
  </form>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">

  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope){
    $scope.Data = { name: '橘子' };
    $scope.count = 0;
    $scope.$watch('Data', function (newValue, oldValue) {
      if(newValue == oldValue)
      return;
      $scope.count++;
      if($scope.count >5){
         $scope.Data.name = '苹果';
      }
    }, true);
  });
</script>
</body>
</html>

以上这篇关于angular js_$watch监控属性和对象详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
Javascript操作dom对象之select全面解析
Apr 24 #Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 #Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
基于JavaScript实现类名的添加与移除
Apr 23 #Javascript
源码分析Vue.js的监听实现教程
Apr 23 #Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 #Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php4的session功能评述(一)
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php字符串截取的简单方法
2013/07/04 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python ZipFile模块详解
2013/11/01 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
零基础小白多久能学会python
2020/06/22 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
Windows和Linux动态库应用异同
2016/04/17 面试题
Ruby如何定义一个类
2012/10/08 面试题
颁奖晚会主持词
2014/03/25 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
会计入职心得体会
2016/01/22 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
MySQL kill不掉线程的原因
2021/05/07 MySQL
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server