简单的angular购物车商品小计
<!DOCTYPE html>
<html lang="en" ng-app="shopApp">
<head>
<meta charset="UTF-8">
<title>angular购物车小计</title>
<script src="angular.min.js"></script>
<script>
//angular的模块化，模块名是ng-app定义的模块名，ng-app='模块名'是指定从哪个模块开始初始化
var shopApp=angular.module('shopApp',[]);
//angular的写法是shopApp.controller('函数名',function($scope){});，但是这种写法在压缩代码的时候会改变参数$scope,导致angular不识别这个被改变的参数
shopApp.controller('shopCar',['$scope',function($scope){
//在$scope上定义一个变量，使用json来存储需要使用的数据
$scope.phone={
price:,
num:,
fre:
};
//同样的再$scope上也可以添加求和方法，并返回到需要的数据中,在angular中方法作用域变量会优先找自己作用域中的变量值，如果找不到会一级一级的往上找
$scope.sum=function(){
return $scope.phone.price * $scope.phone.num;
};
//监听运费的实时变化，当购物金额大于5000元的时候免运费，当购物金额小于5000元的时候运费为10元
$scope.$watch($scope.sum,function(newVal,oldVal){
$scope.phone.fre=newVal >= ? : ;
},true);
}]);
</script>
</head>
<body>
<div ng-controller="shopCar">
<p>价格：<input type="text" ng-model="phone.price"></p>
<p>个数：<input type="text" ng-model="phone.num"></p>
<p>商品总价：<span>{{sum() | currency:'￥'}}</span></p>
<p>运费合计：<span>{{phone.fre | currency:'￥'}}</span></p>
<p>总计：<span>{{sum() + phone.fre | currency:'￥'}}</span></p>
</div>
</body>
</html>
简单的angular购物车商品小计的更多相关文章
- 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- e3mall商城总结12之购物车的实现、以及购物车小计问题、json406报错
说在前面的话 1.本节主要讲了e3mall购物车的实现方法,我搭建的项目和系统购物车有一些区别,因此这里需要说一下.系统搭建的项目在未登陆的情况下也可以通过cookie进行加入购物车,当用户要下单的时 ...
- python实现简单的循环购物车小功能
python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...
- 用java代码写一个简单的网上购物车程序
需求:1.写一个商品类,有商品编号.商品名称.商品分类.商品单价属性.2.写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法. 3.写一个购物车类,有添加商品方法.查看订单信息,删除商品,修 ...
- 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...
- 用SQL实现统计报表中的"小计"与"合计"的方法详解
本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下 客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...
- SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with ...
- JXLS 2.4.0系列教程（四）——拾遗 如何做页面小计
注:阅读本文前,请先阅读第四篇文章. http://www.cnblogs.com/foxlee1024/p/7619845.html 前面写了第四篇教程,发现有些东西忘了讲了,这里补回来. 忘了讲两 ...
- 简单的python购物车
这几天,一直在学python,跟着视频老师做了一个比较简单的python购物车,感觉不错,分享一下 products = [['Iphone8',6888],['MacPro ...
随机推荐
- PHP中return 和 exit 、break和contiue 区别与用法
先说一下exit函数的用法. 作用: 输出一则消息并且终止当前脚本. 如果一段文本中包括多个以 结束的脚本,则exit退出当前所在脚本. 比如一篇php文本包括一下代码,则输出为world. < ...
- AngularJS Directive 隔离 Scope 数据交互
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
- jquery attr()方法
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^ jque ...
- 3D Banner(jQuery)
1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer: 2.将代码黏贴成html文件,直接用浏览器打开即可: 3.layer属于弹窗提示类插件,可能需要 ...
- iOS 线程安全之@synchronized的用法
@synchronized(self)的用法: @synchronized 的作用是创建一个互斥锁,保证此时没有其它线程对self对象进行修改.这个是objective-c的一个锁定令牌,防止self ...
- [C#6] 4-string 插值
0. 目录 C#6 新增特性目录 1. 老版本的代码 internal class Person { public string Name { get; set; } public int Age { ...
- IIS7如何部署asp.net网站
第一步:发布网站 右键asp.net web项目,选择发布, 然后新建配置文件名称并选择 "文件系统" 发布方法. 目标位置选择本地新建的文件夹如: IISWebSite 第二 ...
- （转）基于CAS实现单点登录（SSO）：cas client端的退出问题
出处:http://blog.csdn.net/tch918/article/details/22276627 自从CAS 3.4就很好的支持了单点注销功能,配置也很简单. 之前版本因为在CAS服务器 ...
- 解决问题：The context cannot be used while the model is being created
使用Entity Framework (v6.1.3)突然遇到这个问题了,之前一直好好的,怎么破? 此处省略了多次在“好”与“坏"的项目中试验的过程(苦啊),直接给出答案.答案是:没有按Db ...
- Oracle物理体系结构
一.ORACLE 物理体系结构 原理结构图 各部分解释: PGA: 私有内存区,仅供当前发起用户使用. 三个作用 用户登录后的session信息会保存在PGA. 执行排序,如果内存不够,oracle会 ...