angularjs $watch demo
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/angular.js"></script>
</head>
<body>
<div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input type="text" ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price*item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart() | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal {{bill.subtotal | currency}}</div>
</div>
<script>
function CartController($scope) {
$scope.bill = {};
$scope.items = [{title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95}]; $scope.totalCart = function () {
var total = 0;
for (var i = 0; i< $scope.items.length; i++) {
total += $scope.items[i].price*$scope.items[i].quantity;
}
return total;
} var calculateTotals = function () {
var total = 0;
for (var i = 0; i < $scope.items.length; i++) {
total += $scope.items[i].price*$scope.items[i].quantity;
}
$scope.bill.totalCart = total;
$scope.bill.discount = total > 100 ? 10 : 0;
$scope.bill.subtotal = total - $scope.bill.discount;
} $scope.$watch('items', calculateTotals, true);
}
angularjs $watch demo的更多相关文章
- AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo
有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...
- 在线浏览PDF之PDF.JS （附demo）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...
- 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo
Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决
前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...
- iOS之ProtocolBuffer搭建和示例demo
这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...
- 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match
今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...
- 无限分级和tree结构数据增删改【提供Demo下载】
无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...
随机推荐
- CentOS 6.5下Git服务器搭建
1 . Git服务器搭建 1. 环境部署 系统环境:服务器端:CentOS 6.5 ,ip:192.168.56.1 客户端:CentOS 6.5 ,ip:192.168.56.101 软件版本:服务 ...
- 新浪微博之XSS蠕虫脚本源码讲解
主要是因为新浪的广场页面有几个链接对输入参数过滤不严导致的反射性XSS.======================================== 微博XSS漏洞点 weibo.com/pub/ ...
- Python3中的新特性(1)——新的语言特性
1.源代码编码和标识符 Python3假定源代码使用UTF-8编码.另外,关于标识符中哪些字符是合法的规则也放宽了.特别是,标识符可以包含代码点为U+0080及以上的任意有效Unico ...
- HTML5 Cheat sheet PNG帮助手册（标签、事件、兼容）
HTML5 Cheat sheet PNG帮助手册(标签.事件.兼容) 1.HTML5标签 2.HTML5事件 3.HTML5兼容 最新HTML5手册资料请参考:http://www.inmotion ...
- KafkaClient接口与Kafka处理请求的若干特性
(依据于0.10.0.0版本) 这个接口的唯一实现类就是NetworkClient,它被用于实现Kafka的consumer和producer. 这个接口实际上抽象出来了Kafka client与网络 ...
- mysql 权限 备份
mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...
- 最长连续回文串（最优线性时间O(n)）
转自:http://blog.csdn.net/hopeztm/article/details/7932245 Given a string S, find the longest palindrom ...
- ios图片拉伸两种方法
UIImage *image = [UIImage imageNamed:@"qq"]; 第一种: // 左端盖宽度 NSInteger leftCapWidth = image. ...
- 简约的单页应用引擎：sonnyJS
点这里 SonnyJS是一个简约的单页应用引擎和HTML预处理器,旨在帮助开发人员和设计人员创建难以置信的强大和快速的单页网站. 主要特性: 模板嵌套,模板继承 动态同步模板路由(非Ajax) 跨窗口 ...
- CPLD VS FPGA
FPGA(Field-Programmable Gate Array),即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的 ...