<body>

    <div ng-app="myApp">

        <div ng-controller="firstController">

            <p>价格:<input type="text" ng-model="iphone.money"></p>

            <p>个数:<input type="text" ng-model="iphone.num"></p>

            <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>

            <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>

            <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>

        </div>

    </div>

    <script type="text/javascript">

        var app = angular.module("myApp", []);

          app.controller('firstController', ['$scope', function ($scope) {

              //对象定义

              $scope.iphone = {

                  money: 5,

                  num: 1,

                  fre: 10

              };

              //计算总量和个数

              $scope.sum = function () {

                  return $scope.iphone.money * $scope.iphone.num;

              }

              //如果总价大于100，运费变成0  可以监听函数，也可以直接监听对象属性

              $scope.$watch($scope.sum,function (newValue,oldValue) {

                  $scope.iphone.fre = newValue >= 100 ? 0 : 10;

              });

          }]);

    </script>

</body>

AngularJS - Watch 监听对象的更多相关文章

  1. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  2. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  3. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  4. Object.defineProperty 监听对象属性变化

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. Proxy监听对象的数据变化，处理绑定数据很有用

    Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处. }; //interceptor 拦截 var ...

  6. vue--》如何使用wacth监听对象的属性变化？

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  7. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  8. angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  9. AngularJs $watch监听模型变化

    $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 举个栗子 ...

随机推荐

  1. 树形DP CCPC网络赛 HDU5834 Magic boy Bi Luo with his excited tree

    // 树形DP CCPC网络赛 HDU5834 Magic boy Bi Luo with his excited tree // 题意:n个点的树,每个节点有权值为正,只能用一次,每条边有负权,可以 ...

  2. Hbase Basic Prerequisites

    Table 2. Java HBase Version   JDK 6      JDK 7       JDK 8 1.0 Not     Supported yes Running with JD ...

  3. 开源项目SuperSocket的学习笔记

    近几日想在一个项目中引进一个Socket Server,用来接收客户端发送的命令消息并根据具体的业务逻辑对消息进行处理,然后转发给其它在线的客户端.因为以前在博客园关注过江大渔开源的SuperSock ...

  4. HDFS体系结构

    HDFS的设计目标 检测以及快速恢复硬件问题. 流式的数据访问. 移动计算比移动数据的代价小. 简化一致性模型. 超大规模数据集 异构软硬件平台之间的可移植性. HDFS的结构模型HDFS是一个主从的 ...

  5. 最简单例子图解JVM内存分配和回收

    一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分 ...

  6. redis的string类型

    string : string类型是二进制安全的, 可以包含任何数据,比如jpg图片或者序列化的对象 . 方法 : set : 设置key对应的值为string类型的value set  name   ...

  7. jvm所占空间的配置

    http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html

  8. javascript函数作用域和提前声明

    一些语言如C.java都有块级作用域,即花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的,但是javascript没有块级作用域.javascript使用函数作用域,即 ...

  9. JavaIO（03）字节流--OutputStream and InputStream

    IO概述:   IO流用来处理设备之间的数据传输 java对数据的操作是通过流的方式 java用于操作流的对象都在IO包中 流按操作数据分为两种:字节流与字符流(编码表) 流按流向分为:输入流,输出流 ...

  10. [Xcode使用 - 3] 复制Xcode5.1.1中的项目模板到Xcode6.1

         由于Xcode6中精简了许多的项目和文件模板,导致开发非常不方便,所以这里简单介绍了怎么复制旧版本Xcode中的模板到新的Xcode中      这里要复制的是项目模板Empty Appli ...