angular学习笔记(十四)-$watch(2)
下面来看一个$watch的比较复杂的例子:
还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子,
给它添加一个计算总价和折扣的功能,如果总价超过500,则优惠10%:
代码如下:
<!DOCTYPE html>
<html ng-app>
<head>
<title>11.1$watch监控数据变化</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="CartController">
<h1>your shopping cart</h1>
<table>
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td><input ng-model="item.quantity"/></td>
<td>{{item.price|currency}}</td>
<td class="red">{{item.price*item.quantity|currency}}</td>
<td><button ng-click="remove($index)">remove</button></td>
</tr>
</table>
<hr>
<table>
<tr>
<td>总价: <span class="del">{{bill.all|currency}}</span></td>
</tr>
<tr>
<td>折扣: <span class="red">{{bill.discount|currency}}</span></td>
</tr>
<tr>
<td>现价: <span class="green">{{bill.now|currency}}</span></td>
</tr>
</table>
</div>
</body>
</html>
function CartController ($scope) {
$scope.items = [
{"title":"兔子","quantity":1,"price":"100"},
{"title":"喵","quantity":2,"price":"200"},
{"title":"狗只","quantity":1,"price":"400"},
{"title":"仓鼠","quantity":1,"price":"300"}
];
$scope.remove = function(index){
$scope.items.splice(index,1)
};
$scope.bill = {
"all":0,
"discount":0,
"now":0
};
$scope.compute = function(){
var total = 0;
for(var i=0; i<$scope.items.length; i++){
total += $scope.items[i].quantity*$scope.items[i].price;
}
$scope.bill.all = total;
$scope.bill.discount = total >= 500 ? total*0.1 : 0 ;
$scope.bill.now = $scope.bill.all - $scope.bill.discount
};
$scope.$watch('items',$scope.compute,true);
}
把需要计算的三个数据: 总价,折扣,现价,放在一个bill对象中,
监测商品列表items数组的变化,设置$watch的第三个参数为true,这样,商品的数据一旦发生变化,就会调用compute方法,重新计算bill对象中的三个数据
这个例子的js还可以写成这样:
function CartController ($scope) {
$scope.items = [
{"title":"兔子","quantity":1,"price":"100"},
{"title":"喵","quantity":2,"price":"200"},
{"title":"狗只","quantity":1,"price":"400"},
{"title":"仓鼠","quantity":1,"price":"300"}
];
$scope.remove = function(index){
$scope.items.splice(index,1)
};
$scope.bill = {
"all":0,
"discount":0,
"now":0
};
$scope.compute = function(){
var total = 0;
for(var i=0; i<$scope.items.length; i++){
total += $scope.items[i].quantity*$scope.items[i].price;
}
$scope.bill.all = total;
$scope.bill.discount = total >= 500 ? total*0.1 : 0 ;
$scope.bill.now = $scope.bill.all - $scope.bill.discount
};
$scope.$watch($scope.compute);
}
差别只有最后一句红色的代码,把$watch的第一个参数从原来的items数组直接改为compute函数.也就是上一篇http://www.cnblogs.com/liulangmao/p/3722885.html讲到的$watch第一个参数的第4种情况.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
遗留问题同上一篇,不清楚直接在$watch的第一个参数中传入函数时,究竟在监测什么东西的变化.
angular学习笔记(十四)-$watch(2)的更多相关文章
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
- angular学习笔记(十四)-$watch(4)
如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
- angular学习笔记(十)-src和href处理
本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...
随机推荐
- 常用工具软件之串口终端工具——SecureCRT和xshell
SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单的说是Windows下登录UNIX或Linux服务器主机的软件.SecureCRT支持SSH,同时支持Telnet和rlog ...
- cannot use 'throw' with exceptions disabled(转）
在为 DragonBonesCPP/refactoring 的 cocos2d-x-3.2 demo 增加 Android 编译时,NDK 报了一个编译错误: error: cannot use ‘t ...
- 怎样以Root方式执行Xcode
粗略算一下,在第一次接触OSX的时候,我接触Windows已经有14年,刚開始用OSX和Xcode各种不习惯.可是用Xcode写了一星期的代码,我却有一种想把Windows和VS扔了的感觉(真的用着非 ...
- import 如何工作
# -*- coding: utf-8 -*- #python 27 #xiaodeng #import 如何工作 #程序第一次导入指定文件时,会执行三个步骤 #1)找到模块文件 #2)编译成位码(需 ...
- 新浪微博API使用初步介绍——解决回调地址的问题
# -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...
- Git恢复之前版本的两种方法reset、revert（图文详解）
一.问题描述在利用github实现多人合作程序开发的过程中,我们有时会出现错误提交的情况,此时我们希望能撤销提交操作,让程序回到提交前的样子,本文总结了两种解决方法:回退(reset).反做(reve ...
- HDUOJ----More is better（并查集）
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- HDUOJ--畅通工程
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- leetcode48:矩阵旋转
题目链接 输入一个N×N的方阵,要求不开辟新空间,实现矩阵旋转. 将点(x,y)绕原点顺时针旋转90度,变为(y,-x).原来的(-y,x)变为(x,y) class Solution(object) ...
- Python的copy()与deepcopy()区别
Python的copy()与deepcopy()分别对应浅拷贝和深拷贝. 它们的理论区别: deepcopy():深复制(也就是寻常意义上的复制),即将被复制对象完全再复制一遍作为独立的新个体单独存在 ...