<!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. imx6 Android6.0.1 init.rc解析

    1. 概述 1.1 概述 之前分析过android5的init.rc,不过还是不够仔细,现在来看看android6的,多的就不写了,只写关键点 忘记一些基本概念可以先看看之前的笔记: Android5 ...

  2. [转]asp.net权限认证：摘要认证(digest authentication)

    本文转自:http://www.cnblogs.com/lanxiaoke/p/6357501.html 摘要认证简单介绍 摘要认证是对基本认证的改进,即是用摘要代替账户密码,从而防止明文传输中账户密 ...

  3. 网页title添加图标

    <link rel="shortcut icon" href="1.ico"> href="图片名字.ico"; 图片后缀名为: ...

  4. MyBatis别名

    Spring的别名管理比较规范,有严格的接口规范,SimpleAliasRegistry实现 -> AliasRegistry接口,而且是线程安全的,Map也用的是ConcurrentHashM ...

  5. [LeetCode]3Sum Closest题解

    3sum Closest: Given an array S of n integers, find three integers in S such that the sum is closest ...

  6. spring 事务管理机制

    1. spring 事务管理抽象 spring 的事务策略机制的核心就是 org.springframework.transaction.PlatformTransactionManager 接口. ...

  7. CSS实现文字两端对齐

    最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...

  8. Bzoj2780: [Spoj]8093 Sevenk Love Oimaster

    题目 传送门 Sol 就是广义\(sam\) 然后记录下每个状态属于哪些串,开\(set\)维护 \(parent\)树上启发式合并一下就好了 # include <bits/stdc++.h& ...

  9. 理解webpack4.splitChunks

    一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题 ...

  10. JS计算十万块钱 分31期 利息万分之五 每个月的还款数

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