<!DOCTYPE HTML>

<html ng-app>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    function Aaa($scope,$timeout){

        $scope.iphone = {

            money : 5000,

            num : 1,

            fre : 10

        };

        $scope.sum = function(){

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

        };

        /*$scope.$watch('iphone.money',function(newVal,oldVal){     //iphone.money这里表示监听的是money这个输入框

            console.log(newVal);    //计算后的值，被监听的那个的值

            console.log(oldVal);    //计算前的值，被监听的那个的值

        },true);*/

        $scope.$watch($scope.sum,function(newVal,oldVal){        //$watch监听的意思，还可以监听函数

            //console.log(newVal);

            //console.log(oldVal);

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

        });

    }

</script>

</head>

<body>

    <div ng-controller="Aaa">

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

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

        <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>    <!--currency 这是一个过滤器，货币格式化的方法，默认是美元符号-->

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

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

    </div>

</body>

</html>

angularJs购物金额实例操作的更多相关文章

  1. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  2. angularjs的resource实例对象

    angularjs的resource实例对象 我们看看都有啥 而直接使用service对象的时候没有前面这些$

  3. [转]使用Xcode 4发布App 实例操作

    使用xcode 4发布app 实例操作是本文介绍的内容,不多说,我们直接进入话题. 1.iOS Provisioning Portal 和iTunes Connect 没有变,下载与安装.mobile ...

  4. Flashback Drop实例操作

    1.Flashback DropFlashback Drop 是从Oracle 10g 开始出现的,用于恢复用户误删除的对象(包括表,索引等), 这个技术依赖于Tablespace Recycle B ...

  5. 一个简单的购物金额结算（JAVA）

    我编写的代码: import java.util.Scanner; public class ZuoYe01 { public static void main(String[] args) { // ...

  6. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

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

  7. 040——VUE中组件之组件间的数据参props的使用实例操作

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

  8. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

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

  9. php5.4以上 mysqli 实例操作mysql 增,删,改,查

    <?php //php5.4以上 mysqli 实例操作mysql header("Content-type:text/html;charset=utf8"); $conn ...

随机推荐

  1. Spring发送基于freemarker模板的邮件

    在项目开发过程中,我们经常会遇到需要发送邮件的场景,比如:用户验证邮箱的时候,有活动通知或者提醒通知的时候……有些时候我们可能只需要发送一些简单文本内容即可,但是大多数情况下我们更希望邮件的内容是丰富 ...

  2. 联想G480安装固态硬盘过程

    联想G480安装固态硬盘过程  百度上面图文并茂: https://jingyan.baidu.com/article/e2284b2b68eaf6e2e6118de1.html

  3. jquery选择器【总结】

    本文总结整理了jquery里和选择器相关的所有方法,通过这篇文章,可以让你学习到在jquery里使用选择器的所有方法. 一:基本选择器: $("#aijquery") 选择id值等 ...

  4. 利用PHP的debug_backtrace函数，实现PHP文件权限管理、动态加载

    简述 可能大家都知道,php中有一个函数叫debug_backtrace,它可以回溯跟踪函数的调用信息,可以说是一个调试利器. 好,来复习一下 01 one(); 02 03 function one ...

  5. nodejs简易代理服务器

    直接代码: var http = require('http') var proxy = http.createServer(function (request, response) { var op ...

  6. android 模拟器无法启动问题

    很早之前就碰到过Android Studio模拟器无法启动的问题,今天终于尝试去解决了下,下面将我解决的方法记录下. 模拟器报错信息为: emulator: ERROR: x86 emulation ...

  7. 引入第三方js文件，报错

    错误:Mixed Content: The page at 'https://localhost:44336/MENU' was loaded over HTTPS, but requested an ...

  8. hdu 1251 统计难题 字典树第一题。

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  9. lambda 表达式学习笔记

    在Java中传递一个代码段并不容易,不能直接传递代码段.Java是一个面向对象语言,所以必须构造一个对象,这个对象的类需要一个方法能包含所需的代码.lambda的出现有效的解决这个问题,让代码变得更加 ...

  10. Java中的继承：父类和子类的关系

    一.父类引用指向子类对象时 1.若子类覆盖了某方法,则父类引用调用子类重新定义的新方法 2.若子类未覆盖某方法,则父类引用调用父类本身的旧方法 3.若子类覆盖了某属性,但父类引用仍调用父类本身的旧属性 ...