<!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. SimpleCalendar日历插件改版

    先附上一张货真价实的效果图: 以上部分代码,为了适应我司项目的需求,原来插件源码大改(因为项目中下拉框用了select2,所以原来插件的下拉框就有问题了,在加上原来插件本身就有点问题,特别是农历 .节 ...

  2. 503 Service Unavailable

    转自:https://jingyan.baidu.com/article/6b1823099a258eba58e15902.html 第一 服务是不是被关闭了. 第二 原因IIS设置最大并发连接数 网 ...

  3. g2o error

    /home/lzp/slamtest/graduationcode/p3/poseestimation/pose_estimation_3d2d.cpp: In function ‘void bund ...

  4. 系统每隔一段时间自动pull代码

    #!/bin/bash while true;do dd=$( date -u ) echo $dd,"start pull wmsinventoryapiwms6.2" cd / ...

  5. 线程（Thread）和异常

    线程Thread 实现多线程有两种方式: 1.继承Thread类(本质也是实现Runnable接口的一个实例) Thread类源码 public class Thread implements Run ...

  6. 使用Mac自带svn搭建服务器，并使用idea进行连接

    一.检查Mac自带SVN版本号 二.创建代码仓库 $ mkdir -p /Users/Shared/svn/repository $ svnadmin create /Users/Shared/svn ...

  7. csharp: Gets a files formatted size.

    /* ASP.NET 默认上传文件是4M ,可以修改服务配置.. <system.web> <!-- 指示 ASP.NET 支持的最大文件上载大小. 该限制可用于防止因用户将大量文件 ...

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

    三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...

  9. 浏览器组成、线程及event loop

    浏览器组成 User interface: a. Every part of the browser display, except the window. b. The address bar, b ...

  10. Java 开源博客 Solo 1.5.0 发布 - 新皮肤

    Solo 1.5.0 正式发布了!这个版本主要是加入了 一款新皮肤 next,感谢一直以来关注和支持我们的朋友! 只需一个命令即可启动(不需要安装数据库.部署容器):也可以通过 war 方式部署容器, ...