下面来看一个$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)的更多相关文章

  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(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

  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. eclipse使用egit插件

    本来想用myeclipse,奈何试过网上所列的常用方法,都无法成功安装egit插件.只得转到eclipse.话说eclipse不仅是免费的,启动也较myeclipse更为迅速,安装插件也非常顺利.使用 ...

  2. CSDN日报20170310——《假如我是一行代码》

    [程序人生]假如我是一行代码 作者:henry-hacker 我们不止一次在生活中听到"假如我如何如何,我会如何如何"的句式.而这种句式说出来的一般意义无非就是让我们站在还有一个角 ...

  3. Java程序猿学习C++之数组和动态数组

    数组: #include <iostream> using namespace std; //模板函数 template <class T> void dump(T val) ...

  4. 19、java内存分配 常量池详解

    在class文件中,“常量池”是最复杂也最值得关注的内容. Java是一种动态连接的语言,常量池的作用非常重要,常量池中除了包含代码中所定义的各种基本类型(如int.long等等)和对象型(如Stri ...

  5. Golang配置文件解析-oozgconf

    代码地址如下:http://www.demodashi.com/demo/14411.html 简介 oozgconf基于Golang开发,用于项目中配置文件的读取以及加载,是一个轻量级的配置文件工具 ...

  6. SQL plus连接远程Oralce数据库

    如果要连接远程数据库,传统的一定可行的方法是在本地装一个oracle,然后使用“Network Configuration Assistant”配置,之后用PL/SQL Dev连接 oracle官网上 ...

  7. 关于iOS 类扩展Extension的进一步理解

    很多人可能会问  iOS的分类和扩展的区别,网上很多的讲解,但是一般都是分类讲的多,而这也是我们平常比较常用的知识:但是,对于扩展,总觉得理解的朦朦胧胧,不够透彻. 这里就讲一下我自己的理解,但是这个 ...

  8. leetcode621 贪心：任务安排

    题目链接 给定26种任务,每种任务的数量已知. 相同任务之间必须间隔n个时间段,为了不足n个时间段,可以让及其休息. 问:最少需要多长时间才能处理完这些任务? 这道题用贪心策略解决:每次安排任务时,优 ...

  9. HawkHost退款流程详解

    http://www.senzw.com/newsfile/2011928115323.htmlHawkhost提供30天退款保证,退款流程也比较简单,下面为大家介绍一下整个退款流程. 首先登录客户中 ...

  10. C#委托、事件剖析(下)

    本节对事件进行总结. 二.事件: 1.概念:Event:A member that enables an object or class to provide notifications;官方的解释是 ...