<!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. postgresql 备份与恢复

    备份 C:\PostgreSQL\\bin>pg_dump -h localhost -p -U postgres Mes > d:/.bak 恢复 C:\PostgreSQL\\bin& ...

  2. ashx 绝对路径得到物理路径

    //先得到模板页所在的路径 string phyPath = context.Server.MapPath("/p02style.html"); //得到模板的所有内容 strin ...

  3. [javaSE] GUI（jar包双击运行）

    首先应该在java文件中定义包名,package 包名 带包编译成class文件 切换到目录下,使用jar -cvf xx.jar 包名,就是把那个包放到xx.jar包里面 此时双击会报错,找不到要执 ...

  4. oracle 多列数据相同，部分列数据不同合并不相同列数据

    出现这样一种情况: 前面列数据一致,最后remark数据不同,将remark合并成 解决办法: 最后一列:结果详情: 使用到的语句为: select a,b,c,wm_concat(d) d,wm_c ...

  5. HDU 1757 矩阵求第n的递推式

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  6. SQLHappy微软数据库连接查询操作，对数据的处理和查询

    (软件已更新,部分介绍与新版软件有出处) 1.服务连接界面介绍 2.主界面介绍 3.表搜索介绍 4.命令菜单部分介绍 5.插件介绍 6.帮助菜单介绍 7.数据库列表右键菜单 8.数据库结构和数据操作( ...

  7. Inside the C++ Object Model：构造语意（chapter5）

    看到构造语意的其中一节“继承体系下的对象构造”(5.2节)的最后,看来原文,发现侯杰的翻译有问题,怪不得读起来不顺. What about when providing an argument for ...

  8. redux、immutablejs和mobx性能对比（三）

    四.我的结论 通过第三部分的数据数据分析,我觉得我们可以得到以下结论: 无论是在开发环境还是测试环下页面的首次加载速度结果都是:redux>immutablejs>mobx,但是他们之间的 ...

  9. 关于java赋值运算的一个小例子

    直接贴代码,这个也是做题目中遇见的,觉得很好奇,查了一波,然后自己编写代码看了一下,果真如此,哈哈哈...... public class 关于Boolean的赋值运算 { public static ...

  10. JavaScript函数与面向对象

    一.JS面向对象 function Func(name,age){ //this = obj this.Name = name; this.Age = age; } obj = new Func('r ...