关于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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
javascript 面向对象继承
Nov 26 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jQuery filter函数使用方法
May 19 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
React自定义hook的方法
Jun 25 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
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
vue实现页面加载动画效果
2017/09/19 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
简单实现python数独游戏
2018/03/30 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python实现公司年会抽奖程序
2019/01/22 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
高校自主招生自荐信2015
2015/03/04 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS