<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. ASP.NET单点登录(代码)

    [p=25, null, left]由于某些原因,在我们的应用中会遇到一个用户只能在一个地方登录的情况,也就是我们通常所说的单点登录.在ASP.NET中实现单点登录其实很简单,下面就把主要的方法和全部 ...

  2. 警惕javascript代码中的“</script>”！

    之前在写<博客园自定义博客侧边栏公告的过滤漏洞>的时候遇到了一个javascript代码报错“语法错误”的问题,一直不得以解决,感谢Arliang发现了并为我进行了耐心的解释,现整理如下: ...

  3. canvas 模拟小球上抛运动的物理效果

    最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单.比如,游戏的逼真效果,需要自己来coding…… 所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉 ...

  4. Java-note-输入流

    java不像C中拥有scanf这样功能强大的函数,大多是通过定义输入输出流对象.常用的类有BufferedReader,Scanner.实例程序:一,利用 Scanner 实现从键盘读入integer ...

  5. android各种适配器的用法（转）

    ArrayAdapter_SimpleAdapter_CursorAdapter的区别 数据源不同而已1. String[]: ArrayAdapter2. List<Map<String ...

  6. redis高级实用特性

    1. 安全性 2. 主从复制 3. 事务处理 4. 持久化机制 5. 发布订阅消息 : 可以做一个消息系统 6. 虚拟内存的使用 一 . 安全性 设置客户端连接后进行任何其他指定前需要使用的密码 . ...

  7. CalendarUtil

    package ch.makery.address.util; import java.text.ParseException; import java.text.SimpleDateFormat; ...

  8. jinfo用法

    jinfo(Configuration Info for Java)的作用是实时地查看和调整虚拟机各项参数.使用jps命令的-v参数可以查看虚拟机启动时显式指定的参数列表,但如果想知道未被显式指定的参 ...

  9. Jvm基础（2）-Java内存模型

    Jvm基础(2)-Java内存模型 主内存和工作内存 Java内存模型包括主内存和工作内存两个部分:主内存用来存储线程之间的共享变量:而工作内存中存储每个线程的相关变量. 如下图所示: 需要注意的是: ...

  10. C#多线程(上) 分类： C# 线程 2015-03-09 10:35 174人阅读 评论(0) 收藏

    一.多线程的相关概念 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的. 什么是线程? 线程是程序中的一个执行 ...