<!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. 九： 操作提示（js版本）

    一.toast 消息提示框 他用到了一个wx.showToast(object) 这样一个方法.作用是显示提示框. /* ---page/test/test.wxml----*/   <butt ...

  2. android FrameLayout

    FrameLayout:帧布局,可以显示图片的动画效果 前景图像: 永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片 常用属性: android:foreground:设置该帧布局容器 ...

  3. 设置centos7.3的YUM源为国内阿里云源

     CentOS系统更换软件安装源 第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cent ...

  4. java 自定义泛型

    package com.direct.demo; import java.util.ArrayList; import java.util.HashMap; import java.util.Link ...

  5. idea 常用快捷键 笔记

    1. main方法 输入psv tab或回车 类似的 psf fori (for循环) sout 备注:  通过ctrl+j 可以查询 2. 删除当前行 ctrl + y 3. 复制当前行 ctrl ...

  6. Nodejs + express post get 参数获取小结

    req.params.xxxxx 从path中的变量 req.query.xxxxx 从get中的?xxxx=中 req.body.xxxxx 从post中的变量 Post下别忘了: app.use( ...

  7. 远景GIS云产品规划

    远景GIS云平台在初期有过产品设计,随着研发工作的进行以及对GIS云的认知更进行一步,最近重新梳理了平台的产品规划,使以后的开发不至于走偏方向. GIS云平台的研发也是摸着石头过河,免不了有考虑不到的 ...

  8. .NET AOP微型框架发布 --CleanAOP

    CleanAOP--简介 作者:立地(欧文) 邮箱:jarvin_g@126.com 导语: AOP为Aspect Oriented Programming的缩写. 意为:面向切面编程.将日志记录,性 ...

  9. Totem协议（SRP/RRP）讲解

    基本概念 •SRP:  The Totem Single-Ring Ordering and MembershipProtocol            –基于以太网的组通信协议,节点间组成单环结构 ...

  10. UX基础 - OmniGraffle新手指南

    原文地址:http://beforweb.com/node/202,大半夜找到,作为使用手册 我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以S ...