angularJS之$watch的一个小介绍
现在最近公司项目使用angularJS进行开发;以前也接触过但是不多,趁着现在熟悉回来。
如题,angular中$watch也是我们在开发的时候需要的各种监听;
$watch接收3个参数,第一个是对象,或者对象中某个属性,或者一个函数;第二个为回调方法【回调中有两个参数第一个为新值newVal,第二个为旧值oldVal】,第三个为true/false默认为false,为true的时候对象中的某个属性值发生改变都会触发回调;
如以下代码:
<section ng-controller="myCtrl">
单价:<input type="text" ng-model="shop.money"/>
数量:<input type="text" ng-model="shop.count"/>
运费:{{shop.fre}}
<br/> <p>总价:{{total() + shop.fre | currency:'¥' }}</p>
</section>
<script>
var myapp = angular.module("myapp",[]);
myapp.controller('myCtrl',["$scope",function($scope){
$scope.shop = {
money : 10,
count:1,
fre : 10
};
$scope.total = function() {
return $scope.shop.money * $scope.shop.count;
}
//$watch 接收3个参数,前两个是必选的,第一个为监听的对象或者属性,也可以监听一个函数,第二个为被监听对象或者属性变化时的回调,第三个为true,表示深度监听
//当为true的时候监听的第一个为对象时,对象的某个属性发生改变也会监听到并触发回调,没写默认false对象某个属性发生改变不会触发回调
//回调参数接收3个参数,第一个为新值,第二个为旧值,前面监听的是什么回调里的就是前面监听的对象或者属性或者函数
$scope.$watch('shop', function(newVal, oldVal){ console.log(newVal.money);
console.log(oldVal.money); }, true);
}]); </script>
第三个参数为true时改变shop对象中任何一个数都会触发$watch回调;
//$watch监听函数;
//监听函数
$scope.$watch($scope.total, function(newVal, oldVal){
$scope.shop.fre = newVal>=99? 0 : 10;
});
当总价超过99的时候运费变为了0,这其实用到了angular中的双向数据绑定,当model数据发生改变的时候view也会发生改变如运费,而当view层数据改变的时候model也会发生改变如数量改变时总价也会发生改变。
好了,这是一个关于$watch的小详解,有不正确的地方欢迎大家指正
angularJS之$watch的一个小介绍的更多相关文章
- Python2 下 Unicode 的一个小bug
关于Python的编码问题已经是老生常谈了,此处主要是介绍一个罕见的问题,也算是Python2的一个bug了(Python3不会有此问题). 在有时候我们去爬取网页或者调用一些第三方库获取文本的时候, ...
- 【开源一个小工具】一键将网页内容推送到Kindle
最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...
- 关于SVN配置文件的一个小例子
1 背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于工作日志,原先采用邮件方式发给经理,但是这种方式 ...
- c++学习笔记---04---从另一个小程序接着说
从另一个小程序接着说 文件I/O 前边我们已经给大家简单介绍和演示过C和C++在终端I/O处理上的异同点. 现在我们接着来研究文件I/O. 编程任务:编写一个文件复制程序,功能实现将一个文件复制到另一 ...
- c++学习笔记---03---从一个小程序说起2
从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...
- 使用Trinity拼接以及分析差异表达一个小例子
使用Trinity拼接以及分析差异表达一个小例子 2017-06-12 09:42:47 293 0 0 Trinity 将测序数据分为许多独立的de Brujin grap ...
- 为什么使用eval()将json字符串转换为对象要多加一个小括号
使用eval()将json字符串转换为对象要多加一个小括号: 关于eval()函数的具体用法这里就不多介绍了,具体可以参阅javascript的eval()方法一章节,下面就介绍一下为什么使用eval ...
- 3月题外:关于JS实现图片缩略图效果的一个小问题
由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...
- Pygame:编写一个小游戏 标签: pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)
大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...
随机推荐
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- PGPool 配置错误定位 s_do_auth: expecting R got E
自从按照教程 http://www.pgpool.net/docs/latest/pgpool-zh_cn.html#hba配置好PGPool以后,每次启动 pgpool -c -n -D 都报 s_ ...
- 在将 varchar 值 '' 转换成数据类型 int 时失败
我们有时候用in语句的时候,发现存在Sql注入漏洞,想参数化处理一下,遇到语句执行问题!! declare @ids varchar() set @ids='216,218' select * fro ...
- iOS9 适配(杂七杂八)
1.iOS9 以后,table cell 在旋转的时候会自动调整视图内容的布局,设置以下的属性,课禁止该行为. if (runTimeOSVersion >= 9.0f) { _listTabl ...
- C++ 在Windows下截取整个屏幕 和 指定句柄窗口的屏幕
#include <windows.h> #include <stdint.h> #include <stdio.h> void ShootScreen(const ...
- 启动eclipse时:java is started but returned code 13
此问题是eclipse位数和java位数不匹配造成的 我的是win10 64位的eclipse + 32位的java造成的问题 查看eclipse位数:用记事本打开eclipse根目录下的eclips ...
- 浅谈Json和jsonp
定义: JSON:是一种数据交换格式, JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议 曾经看到一个有意思的例子:JSON是地下党们用来书写和交换情报的“暗号”的话, 而JS ...
- AFNetworking 2.0指北
AFNetworking 2.0 来了 SEP 30TH, 2013 前几天 Mattt 发布了 AFNetworking 2.0,我的一个最大感慨就是,他怎么那么高产? 关于 Mattt Mattt ...
- iOS JavaScriptCore与H5交互时出现异常提示
在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...
- React Native IOS源码初探
原文链接 http://www.open-open.com/lib/view/open1465637638193.html 每个项目都有一个入口,然后进行初始化操作,React Native 也不例外 ...