<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. C++虚函数表原理

    C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指 向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有“多种形态”,这是一种泛型技 ...

  2. ldconfig报错 ：libstdc++.so.6.0.18-gdb.py不是一个elf文件

    今天安装wxWidgets,输入ldconfig竟然提示 /usr/lib64/libstdc++.so.6.0.18-gdb.py 不是一个elf文件,开头魔数错误 摸不着头脑,上网搜了一下,有说是 ...

  3. 从零教你在Linux环境下（ubuntu）如何编译hadoop2.4

    问题导读: 1.如果获取hadoop src  maven包?2.编译hadoop需要装哪些软件?3.如何编译hadoop2.4?扩展:编译hadoop为何安装这些软件? 本文链接 http://ww ...

  4. ESXi 与其它虚拟化底层产品之比较：

    序号 虚拟化管理程序属性 VMware ESXi 5.0 采用 Hyper-V 的 Windows Server 2008 R2 SP1 Citrix XenServer 5.6 FP1  1 磁盘占 ...

  5. 第二百四十三天 how can I 坚持

    制定的计划完成不了了,好多问题啊.又想当然了,晚上加了会班. 今天雾霾好严重,一出地铁大裤衩怎么没了.雾霾爆表啊. 还好现在刮大风了. 准备看<芈mi月传>了. 睡觉.

  6. typedef typedef struct的使用

    typedef通常情况用于声明结构体之类的 1,定义某些便于记忆的结构体或者使现有的类型看上去更加整齐,比如后来因为经常使用而被添加进入c/c++标准头文件的stdint.h typedef sign ...

  7. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  8. Struts2的输入验证

    一.概述: ① Struts2的输入验证 –基于 XWorkValidation Framework的声明式验证:Struts2提供了一些基于 XWork Validation Framework的内 ...

  9. DATASNAP多表提交之事务控制之通用方法

    ERP系统的单据,总是些主从表结构,有一个主表,N个子表,子表又有子表,形成N层,单据数据提交时,主从表数据都要提交,为了保证数据的完整性,必须提供事务控制,要么都提交成功,有一个提交失败所有的提交都 ...

  10. MSXML读取XML中文

    // QueryNodes.cpp : Defines the entry point for the console application. // #include <stdio.h> ...