<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. 使用calabash测试开源中国Android客户端

    Calabash-android是支持android的UI自动化测试框架,前面已经介绍过<中文Win7下成功安装calabash-android步骤>,这篇博文尝试测试一个真实应用:开源中 ...

  2. Asp.Net中文本换行

    Asp.Net中文本换行 VB.NET Function HtmlCode(ByVal fString)        If fString <> "" Then    ...

  3. 【和我一起学python吧】python的一些推荐

    看到未名的几篇帖子 使我想起了和python的一些经历,于是写了一篇咚咚. 1 书籍: python的syntax足够简单,semantics也不复杂,不怎么会使人混乱,一般来说看自带的文档足够可以学 ...

  4. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  5. 题目1434：今年暑假不AC （项目安排类：结束时间快排，判断开始时间）

    题目描述: “今年暑假不AC?”“是的.”“那你干什么呢?”“看世界杯呀,笨蛋!”“@#$%^&*%...”确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会抛开电脑,奔向电视作为 ...

  6. Classes and Objects :类和对象(1)

    类的定义:修饰符,class,类名,extends,逗号分隔的implements,类体{}规范的类名:首字母要大写,以后每个单词首字母都大写字段的定义:修饰符,类型,字段名按照封装的思想,字段通常定 ...

  7. 有关android UI 线程

    1. GUI线程框架 常见的 Swing, SWT框架都是作为单线程子系统来实现的,实际上不仅限于在Java中, Qt.MacOS Cocoa以及其他的环境中的GUI框架都是单线程的.虽然很多人尝试过 ...

  8. Activating Google Cloud Storage

    先决条件 你需要下面的内容: 1.一个Google账户,比如来自Gmail.如果你没有,请在Google account signup site注册. 2.一个新的或已经存在的Google Devel ...

  9. es 的集群状态

    es的集群状态一共有三种 : green yellow red 状态是基于 碎片的 等级进行划分的 .

  10. 第二百六十八天 how can I坚持

    早上看了个电影<我的少女时代>,挺好看的. 下午从四点玩游戏一直玩到现在,也是疯了. 晚上也没有吃饭,是不是太堕落了. 徐斌他同学今天中午过来,做了个饭,也是服了,好难吃. 还没做好准备, ...