现在最近公司项目使用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的一个小介绍的更多相关文章

  1. Python2 下 Unicode 的一个小bug

    关于Python的编码问题已经是老生常谈了,此处主要是介绍一个罕见的问题,也算是Python2的一个bug了(Python3不会有此问题). 在有时候我们去爬取网页或者调用一些第三方库获取文本的时候, ...

  2. 【开源一个小工具】一键将网页内容推送到Kindle

    最近工作上稍微闲点,这一周利用下班时间写了一个小工具,其实功能挺简单但也小折腾了会. 工具名称:Simple Send to Kindle Github地址:https://github.com/zh ...

  3. 关于SVN配置文件的一个小例子

    1   背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于工作日志,原先采用邮件方式发给经理,但是这种方式 ...

  4. c++学习笔记---04---从另一个小程序接着说

    从另一个小程序接着说 文件I/O 前边我们已经给大家简单介绍和演示过C和C++在终端I/O处理上的异同点. 现在我们接着来研究文件I/O. 编程任务:编写一个文件复制程序,功能实现将一个文件复制到另一 ...

  5. c++学习笔记---03---从一个小程序说起2

    从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...

  6. 使用Trinity拼接以及分析差异表达一个小例子

    使用Trinity拼接以及分析差异表达一个小例子  2017-06-12 09:42:47     293     0     0 Trinity 将测序数据分为许多独立的de Brujin grap ...

  7. 为什么使用eval()将json字符串转换为对象要多加一个小括号

    使用eval()将json字符串转换为对象要多加一个小括号: 关于eval()函数的具体用法这里就不多介绍了,具体可以参阅javascript的eval()方法一章节,下面就介绍一下为什么使用eval ...

  8. 3月题外:关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  9. Pygame:编写一个小游戏 标签: pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)

    大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...

随机推荐

  1. Xamarin Android 绑定jar库同时将so库打包进去

    1.在创建的Bindings Library项目中,新建Assets目录: 2.Assets目录下再分别创建armeabi,armeabi-v7a,x86三个目录: 3.将so文件分布copy到三个目 ...

  2. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  3. java 基础三 下雪

    通过repaint()方法进行重画. import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Graphics; p ...

  4. xmpp openfire smack 介绍和openfire安装及使用

    前言 Java领域的即时通信的解决方案可以考虑openfire+spark+smack.当然也有其他的选择. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端版本,目前建议使用 ...

  5. VS2012完全卸载与VS2013安装

    项目本来使用的是vs2012 Ultimate,也一直跟随ms的节奏安装了从1到4的update,但一些无法忍受的问题却一直没有解决: 1.偶尔出现要等待编辑器响应的情况: 2.偶尔输入了冒号也不会出 ...

  6. ue4 ios

    project settings package 可以指定非APK打包,确定资源是否发布 可以指定content下某个目录所有文件(非.uassert)都打包 ios环境下fopen打开文件需要指定路 ...

  7. 错误 You are trying to run the Python 2 version of Beautiful Soup under Python 3. This will not work

    Win  10    下python3.6 使用Beautiful Soup  4错误 You are trying to run the Python 2 version of Beautiful ...

  8. redhat note

    1,iptables -I INPUT 5 -m state --state NEW -p tcp --dport 80 -j ACCEPT

  9. 分布式集群搭建(hadoop2.6.0+CentOS6.5)

    摘要:之前安装过hadoop1.2.1集群,发现比较老了,后来安装cloudera(hadoop2.6.0),发现集成度比较高,想知道原生的hadoop什么样子,于是着手搭建一个伪分布式集群(三台), ...

  10. ElasticSearch作为Windows服务启动

           由于公司服务器用的Windows服务器,所以你懂得…… 直接下载elasticsearch中文发行版.下载地址是:https://github.com/medcl/elasticsear ...