AngularJS系统学习之$watch(监控)
在scope的内置的所有函数中,用的最多的可能就是$watch函数了, 当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。 你可以监控单个对象的属性,亦可以监控需要经过计算的结果(函数), 实际上只要能够被当做属性访问到, 或者可以当做一个Java函数被计算出来, 就可以被$wacth函数监控。它的函数签名为:
$watch (watchFn, watchAction, deepWatch)
其中watchFn
这个参数是一个带有Angular表达式或者函数的字符串, 它会返回被监控函数的数据模型的当前值。
watchAction
这是一个函数表达式, 当watchFn发生变化时会被调用。
deepWatch
如果设置为true, 这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。若果你想要监控数组中的元素, 或者对象上的所有属性, 而不只是监控一个简单的值, 就可以设置为true。
写了一个小例子,大家可以看看。
<!DOCTYPE>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Your Shopping Cart</title>
<script src="../../../vendor/angular/angular.js"></script>
<script src="../../../vendor/angular/angular-route.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your order</h1> <div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<div>Total:{{totalCart()}}</div>
<div>Discount: {{bill.discount}}</div>
<div>Subtatal: {{subtotal()}}</div>
</div> <script>
var myAppMoudle = angular.module('myApp', []);
myAppMoudle.controller('CartController', ['$scope', function ($scope) {
$scope.bill={};
$scope.discount = 2;
$scope.items = [{title: 'paint', quantity: 8, price: 3.95},
{title: 'pa', quantity: 7, price: 3.95},
{title: 'paa', quantity: 17, price: 3.95},
{title: 'paaa', quantity: 177, price: 3.95}];
$scope.totalCart = function () {
var total = 0;
for(var i = 0, len = $scope.items.length; i < len; i++){
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
} $scope.subtotal = function () {
return $scope.totalCart() - $scope.discount;
}; function calculateDiscount(newValue, oldValue, scope) {
$scope.bill.discount = newValue > 100 ? 10 : 0;
} $scope.$watch($scope.totalCart, calculateDiscount);
}]);
</script>
</body>
</html>
AngularJS系统学习之$watch(监控)的更多相关文章
- AngularJS系统学习之Scope(作用域)
本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂, 也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...
- AngularJS系统学习之Module(模块)
本文源自:http://blog.csdn.net/woxueliuyun/article/details/50962645 学习之后略有所得, 来此分享.建议看原文. 模块是提供一些特殊服务的功能块 ...
- AngularJS系统学习之Directive(指令)
本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...
- AngularJS系统学习之Factory,Service, Provider(工厂,服务,供应者)
本文转自:http://blog.csdn.net/zcl_love_wx/article/details/51404390 我看过敲过代码之后, 有了很深的理解, 这三个东西其实都是用来返回对象的. ...
- MES系统学习
MES系统是当今制造型企业信息化的热点,而统一建模语言UML是面向对象建模的标准语言,在软件工程发挥着重要作用.MES系统如何进行UML建模呢,今天和大家重点讨论一下MES系统的UML建模方法,请看本 ...
- 系统学习Docker 践行DevOps理念
Docker代表的容器技术是近两年的大热技术,和人工智能.区块链等热点不同,容器技术的门槛并不高,每一个开发.测试.运维人员都能在日常工作中掌握和使用,是当今IT从业人员的必备技能之一.本课程会带大家 ...
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- 零基础如何系统学习Java Web
零基础如何系统学习Java Web? 我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...
- Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇
前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...
随机推荐
- android实例讲解----Tomcat部署Web应用方法总结
参考文档:http://blog.csdn.net/yangxueyong/article/details/6130065 Tomcat部署Web应用方法总结 一.架构介 ...
- Foundation框架 - NSException类
NSException类 WBStudentManager.h #import <Foundation/Foundation.h> NSString* const NameInvalidE ...
- windows平台简易直播系统搭建
最近做直播系统的朋友很多,正好前端时间也在做这一块,写片文章分享下开发心得,以为后用. 直播系统我将它分为前堆推流,后台服务,客户端播放三大部分.前端推流基于ffmpeg,后台服务 使用crtmp服务 ...
- Laravel 数据库连接, 数据库名,配置文件修改
数据库连接:在根目录(laravel5.1下面有个.env文件,如果没有则会有个.env.example然后将此文件修改成.env文件即可)打开文件:找到:DB_HOST=127.0.0.1 //连 ...
- jsp页面设置绝对路径
例子: 设置完之后就随便jsp页面放在哪个文件夹都可以加载到资源了 <%@ page language="java" contentType="text/html; ...
- 简单的ftp服务器
import os from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handlers import FTPHandle ...
- Chrome 前端 插件
本文内容都来源于偶整理的fetool. 想让更多使用Chrome的小伙伴,体验到这些令人愉悦的小工具,所以单独整理了这篇文章. 如果你是 前端/服务端/设计/面向Github编程/视觉控,相信下列的插 ...
- caffe配置Makefile.config----ubuntu16.04--重点是matlab的编译
来源: http://blog.csdn.net/daaikuaichuan/article/details/61414219 配置Makefile.config(参考:http://blog.csd ...
- 生产制造追溯系统-通过微信小程序实现移动端报表平台
前言 前两篇文章主要梳理了一下在生产过程中如何更高效.更稳定的实现条码打印,有不少园子里的朋友私信我,互相讨论了一些技术方面的问题,双方都各有收获,再此感谢博客园提供的这个交流平台,让五湖四海的朋友能 ...
- 对JavaBean创建的一点改进
在看了<Effective Java>Item2中对JavaBean的描述后,再结合Item1和Builder模式,遂想有没有其他方式避免JavaBean创建的线程安全问题呢? 以如下Ja ...