关于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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue-resourc发起异步请求的方法
Feb 11 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数据库大小的方法
2015/06/19 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python extract及contains方法代码实例
2020/09/11 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
八年级美术教学反思
2014/02/02 职场文书
中国好声音广告词
2014/03/18 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
护士年终个人总结
2015/02/13 职场文书
医生辞职信范文
2015/03/02 职场文书
2016年情人节问候语
2015/11/11 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript