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 ...
随机推荐
- java beans
There are N little kids sitting in a circle, each of them are carrying some java beans in their hand ...
- iOS UITableViewCell的"滑动出现多个按钮"
本文授权转载,作者:@夏天是个大人了 前言: 本篇博客其实就是想介绍tableviewcell滑动的一些"事",昨天在逛github的时候看到的还挺有意思的三方库,简单用了一下感觉 ...
- visual studio code 里调试运行 Python代码
最近对微软的visual studio code 挺感兴趣的,微软的跨平台开发工具.轻量简洁. 版本迭代的也挺快的,截止16年8月2日已经1.3.1版本了,功能也愈加完善.(16年12月18日 已经, ...
- SQL声明变量并赋值
declare @studentid int //声明一个int型变量 );//设置变量值,tclass 为任意表,classid 为表中任一字段 if(@studentid is not null) ...
- linux后台查看共享内存和消息队列的命令
ipcs ipcs -q : 显示所有的消息队列 ipcs -qt : 显示消息队列的创建时间,发送和接收最后一条消息的时间 ipcs -qp: 显示往消息队列中放消息和从消息队列中取消息的进程ID ...
- 常用git命令纪录
git branch xxx 新建分支xxx git branch -a 查看所有分支(包括远程) git remote add origin http://xxx.git 在本地添加一个远程仓库, ...
- Sqlserver 循环表
CREATE TABLE dbo.[User] ( UID BIGINT IDENTITY ,Name ) NOT NULL ,Pwd ) NOT NULL ,CONSTRAINT PK_User P ...
- Java语言程序设计(基础篇) 第四章 数学函数、字符和字符串
第四章 数学函数.字符和字符串 4.2 常用数学函数 方法分三类:三角函数方法(trigonometric method).指数函数方法(exponent method)和服务方法(service m ...
- Android 基于Android的手机邮件收发(JavaMail)之四(邮件的发送)
上一个邮件的接受,因为不当操作,保存未完成,一切东西都得从头开始那就先从邮件发送来吧. 先下我们做一个较为简单的邮件发送 以下是源代码:相信看过上篇文章所给连接的人,对于javamail应该都有了一定 ...
- [SharePoint 2013] Set value for people editor with JSOM
function PeoplePicker() { this.context = null; this.web = null; this.currentUser = null; this.parent ...