关于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 相关文章推荐
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
document.forms用法示例介绍
Jun 26 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
JS立即执行的匿名函数用法分析
Nov 04 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实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
Python 功能和特点(新手必学)
2015/12/30 Python
浅谈python中set使用
2016/06/30 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
工程造价自荐信
2013/10/09 职场文书
车间班组长的职责
2013/12/13 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
学校师德承诺书
2014/05/23 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2014年社区工作总结
2014/11/18 职场文书
升学宴学生答谢词
2015/01/05 职场文书
多人股份制合作协议书
2016/03/19 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis