angularJs购物金额实例操作
<!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购物金额实例操作的更多相关文章
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- angularjs的resource实例对象
angularjs的resource实例对象 我们看看都有啥 而直接使用service对象的时候没有前面这些$
- [转]使用Xcode 4发布App 实例操作
使用xcode 4发布app 实例操作是本文介绍的内容,不多说,我们直接进入话题. 1.iOS Provisioning Portal 和iTunes Connect 没有变,下载与安装.mobile ...
- Flashback Drop实例操作
1.Flashback DropFlashback Drop 是从Oracle 10g 开始出现的,用于恢复用户误删除的对象(包括表,索引等), 这个技术依赖于Tablespace Recycle B ...
- 一个简单的购物金额结算(JAVA)
我编写的代码: import java.util.Scanner; public class ZuoYe01 { public static void main(String[] args) { // ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 040——VUE中组件之组件间的数据参props的使用实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- php5.4以上 mysqli 实例操作mysql 增,删,改,查
<?php //php5.4以上 mysqli 实例操作mysql header("Content-type:text/html;charset=utf8"); $conn ...
随机推荐
- Python——爬虫学习1
爬虫了解一下 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. Python的安装 本篇教程采用Python3 来写,所以你需要给你的电脑装上Python ...
- C#图片验证码绘制
制作验证码.也可以画弧线之类..... //新建一个网站,在后台代码中引用一个using Stystem.Drawing的命名空间 Bitmap img = , ); //制作一个宽100,高50的画 ...
- flask中的数据操作
flask中数据访问: pip install flask-sqlalemy 创建数据: 创建app的工厂 from flask import Flask from flask_sqlalchemy ...
- 单源最短路(Dijkstra算法)
#返回上一级 @Author: 张海拔 @Update: 2015-03-11 @Link: http://www.cnblogs.com/zhanghaiba/p/3514570.html Dijk ...
- Spring MVC 实现Excel的导入导出功能(1:Excel的导入)
简介 这篇文章主要记录自己学习上传和导出Excel时的一些心得,企业办公系统的开发中,经常会收到这样的需求:批量录入数据.数据报表使用 Excel 打开,或者职能部门同事要打印 Excel 文件,而他 ...
- spring-cloud-sleuth简单使用
快速开始 一.导入依赖 <!--链路追踪 start--> <dependency> <groupId>org.springframework.cloud</ ...
- bnu 4060 奇偶性,异或运算
Plants vs. Zombies Time Limit: 5000ms Memory Limit: 2048KB 64-bit integer IO format: %lld Jav ...
- 基于.Net下整合FastReport,实现条码标签批量打印
一. 准备工作 1. 点击此下载支持.Net4.0的 FastReport ,安装后并破解 2. VS2012 工具箱中,新建选项卡,添加 %安装目录%\Framework 4.0\FastRepor ...
- 【HTML&CSS】基本的入门
在公司培训一段时间不久就去流浪了一段时间,现在回来重新捧起心爱的编程,特别亲切. 自学HTML&CSS,别人说了很多,这那这那的,无论简单还是困难,不亲自去俯下身子学习,怎么都学不会HTML和 ...
- MD5计算器
private void radioBtnFlie_CheckedChanged(object sender, EventArgs e) { RadioButton rb = sender as Ra ...