<!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的更多相关文章

  1. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  4. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  5. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  6. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  7. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  8. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  9. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  10. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

随机推荐

  1. 主元分析PCA理论分析及应用

    首先,必须说明的是,这篇文章是完完全全复制百度文库当中的一篇文章.本人之前对PCA比较好奇,在看到这篇文章之后发现其对PCA的描述非常详细,因此迫不及待要跟大家分享一下,希望同样对PCA比较困惑的朋友 ...

  2. CHtml::radioButtonList

    public function getSortList(){ $arr = array(); $arr[0]['id']=0; $arr[0]['name']="否"; $arr[ ...

  3. 4-Highcharts曲线图之时间轴折线图

    鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...

  4. 2014年全球SEO行业调查报告

    前言: 1.该调查报告是MOZ每两年一度针对SEO行业的数据分析报告. 2.随着SEO的进化,该报告已不仅仅是SEO行业,今年的调查数据更多分析网络营销行业,可以称作"网络营销行业调查报告& ...

  5. 拆分Sql列中内容的拆分

    拆分Sql列中内容的拆分. /*按照符号分割字符串*/ create function [dbo].[m_split](@c varchar(2000),@split varchar(2)) retu ...

  6. DOS系统功能调用表(INT 21H)

    AH 功能 调用参数 返回参数 00 程序终止(同INT 20H) CS=程序段前缀 01 键盘输入并回显 AL=输入字符 02 显示输出 DL=输出字符 03 异步通迅输入 AL=输入数据 04 异 ...

  7. List Comprehensions

    看Python高级编程时有几个东西要记一记,方便以后查询 以下代码基本全摘自Python高级编程 取0~9之间的偶数,类C语言写法: 使用list comprehensions可以极大程度上简化语法: ...

  8. jQuery scroll事件

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. $(document).ready(function () { //本人习惯 ...

  9. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  10. Redis与Memcached的incr/decr差异对比

    目前广泛使用的分布式缓存Redis和Memcached均支持对整数型Value值的增减,对应到具体命令中就是incr和decr命令. incr/decr是原子性操作(memcached 1.2.4及以 ...