<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. [转]关于GCD与多线程

    GCD是什么,你知道吗?你知道了GCD,你确定你会使用吗? 这一篇文章是站在初学者角度去分析GCD,原因是这个很多iOS开发者根本就没用过,即使用过,不知道其中的原理.讲解之前认识一下什么是线程,为什 ...

  2. 谈谈作为一个菜B的培训感受

    培训的目的是为了让新员工更快的适应当前的工作,尽快的跟上前辈的步伐,从而能全身心的投入到当前的工作当中.感觉在培训的时候需要注意以下的几个问题: 1. 新员工必须在意识上认同当前的工作 如今的项目组也 ...

  3. 利用Spring.Net技术打造可切换的分布式缓存读写类

    利用Spring.Net技术打造可切换的Memcached分布式缓存读写类 Memcached是一个高性能的分布式内存对象缓存系统,因为工作在内存,读写速率比数据库高的不是一般的多,和Radis一样具 ...

  4. C语言char[]和char*比较

    先看看一个例子: #include <iostream> using namespace std; main() { char *c1 = "abc"; char c2 ...

  5. python学习之random模块

    Python中的random模块用于生成随机数.下面介绍一下random模块中最常用的几个函数. random.random random.random()用于生成一个0到1的随机符点数: 0 < ...

  6. 判断线段和直线相交 POJ 3304

    // 判断线段和直线相交 POJ 3304 // 思路: // 如果存在一条直线和所有线段相交,那么平移该直线一定可以经过线段上任意两个点,并且和所有线段相交. #include <cstdio ...

  7. Python学习笔记——正则表达式

    今天把之前学的正则表达式好好总结总结. 一.元字符 . :  .表示可以匹配任意一个字符 \d  :  \d表示可以匹配任意一个数字 \D  : \D表示可以匹配任意一个非数字 \s  :  \s表示 ...

  8. 现代程序设计 homework-09

    现代程序设计 homework-09 这次作业是要求将homework-02做成一个可演示的应用,目的是为了让用户看到程序的计算步骤以及中间结果. 借此机会也学了一下JavaScript,感觉总结的地 ...

  9. 链表逆序(JAVA实现)

    题目:将一个有链表头的单向单链表逆序 分析: 链表为空或只有一个元素直接返回: 设置两个前后相邻的指针p,q,使得p指向的节点为q指向的节点的后继: 重复步骤2,直到q为空: 调整链表头和链表尾: 图 ...

  10. C++问题-Qt Visual Studio Add-in

    问题现象:用VS打开其他人的项目提示如下:Qt Visual Studio Add-in...中间全TMD的英文,我就省略...QT版本不对,需要修改QT版本. 问题原因:占时不明,因为我是开发Del ...