同样的例子,还可以这样写:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>11.3$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">{{computeTotal()|currency}}</span></td>

    </tr>

    <tr>

      <td>折扣: <span class="red">{{discount|currency}}</span></td>

    </tr>

    <tr>

      <td>现价: <span class="green">{{computeNow()|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.discount = 0;

    $scope.computeTotal = function(){

        var total = 0;

        for(var i=0; i<$scope.items.length; i++){

            total += $scope.items[i].quantity*$scope.items[i].price;

        }

        return total

    };

    $scope.computeDiscount = function(newV,oldV,scope){

        $scope.discount = newV >= 500 ? newV*0.1 : 0 ;

    };

    $scope.computeNow = function(){

        return $scope.computeTotal() - $scope.discount;

    };

    $scope.$watch('computeTotal()',$scope.computeDiscount);

}
/*
    最后这句橙色的,也可以写成:  
    $scope.$watch($scope.computeTotal,$scope.computeDiscount)   
    效果一致
*/

1. 视图的总价部分,改成computeTotal()

2. $watch监测computeTotal函数返回值的变化

3. 总价变化,则调用computeDiscount函数计算折扣,其中第一个参数就是最新的总价

4. 视图的现价部分,改成computeNow(),通过总价和折扣计算现价

使用这种方法,逻辑上不够清楚,并且,$scope.computeTotal会被多次执行,影响性能,仅作参考.

-----------------------------------------------------------------------------------------------------------------------

遗留问题:

使用angular实现同一个功能,有多种设计方法,需要考虑它的性能,考虑逻辑性.

目前来说,首先要做到的是能够以清楚的逻辑将程序设计出来,将来再慢慢考虑性能.

angular学习笔记(十四)-$watch(3)的更多相关文章

  1. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  2. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  3. angular学习笔记(十四)-$watch(2)

    下面来看一个$watch的比较复杂的例子: 还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子, 给它添加一个计算总价和折扣的 ...

  4. angular学习笔记(十四)-$watch(4)

    如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...

  5. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  6. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  7. angular学习笔记(十六) -- 过滤器(2)

    本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...

  8. angular学习笔记(十六) -- 过滤器(1)

    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...

  9. angular学习笔记(十)-src和href处理

    本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...

随机推荐

  1. Field.setAccessible()方法

    http://blog.csdn.net/kjfcpua/article/details/8496911 java代码中,常常将一个类的成员变量置为private 在类的外面获取此类的私有成员变量的v ...

  2. 算法笔记_180:历届试题 国王的烦恼(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲 ...

  3. 虚拟机Linux下一直获取不到ip怎么办

    虚拟机Linux下一直获取不到ip怎么办 Ifconfig -a 只显示了本地的ip127.0.0.1 和另一个eth1 但是找不到ip地址. 需要做的是: 申请ipdhclient eth1 另外释 ...

  4. 全局安装 vue

    通过npm命令安装vuejs在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或Browserify 的 CommonJS 模块打包器配合使用.(以下操 ...

  5. http 事务

    #事务#HTTP权威指南 9页一个事务由一条请求命令和一个响应结果组成.这种通信是通过名叫HTTP报文(http message)的格式化数据块进行的

  6. 140730暑期培训.txt

    1.大数加减法    思路分析:        1.将数据当做字符串输入(gets(s))        2.将字符型转换为整型,逆着存            char? int      i=0,j ...

  7. opencv-3.0.0-beta和opencv2版本号的差别

    我的机器:64位系统 第一步: opencv官网下载opencv3.0.0-beta版本号.解压到自己的目录,我的目录是E:\,解压后在E盘出现名为opencv的目录.该目录下有两个子目录 第二步:配 ...

  8. 【laravel5.4】 Composer移除依赖

    1.在一次使用composer安装依赖的时候,安装错了包,在其中文网站却找不到移除依赖的命令,只好使用按照官网说法: 为了从命令行获得帮助信息,请运行 composer 或者 composer lis ...

  9. Linux终端监控工具之dstat

    1.安装 yum install dstat 2.示例 1)直接跟数字,表示#秒收集一次数据,默认为一秒:dstat 5表示5秒更新一次 这是默认输出显示的信息: CPU状态:CPU的使用率.这项报告 ...

  10. iOS7 UIWebview加载进度条实现

    不同于WKWebview,wk是有自己的加载进度值的,我们可以直接通过kvo检测到,并显示到进度条内. 但如果我们为了适配ios7,只能使用UIWebview了,这里的加载进度,就比较尴尬了 所以我们 ...