简单的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 ...
随机推荐
- Laravel安装方法 (windows)
Laravel安装方法(windows) 安装PHP 下载PHP7 http://windows.php.net/download#php-7.0 进入上述网站下载PHP7 选择zip包解压安装 配置 ...
- python基础之运算符
算术运算符 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 31 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 -11 * 乘 - 两个数相乘或是返回一个被重复 ...
- PHP基本语法和输出语句方式
- (原) 2.2 ZkClient使用
本文为原创文章,转载请注明出处,谢谢 ZkClient使用 1.jar包引入,演示版本为0.8,非maven项目,可以下载jar包导入到项目中 <dependency> <group ...
- 【HTML5&CSS3进阶学习01】气泡组件的实现
前言 气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...
- JavaScript基本语法（四）
一. JavaScript 函数 1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.我们可以将一些常用的代码封装成函数,待用到的时候就能直接调用使用.利用函数可以使代码的组织结构 ...
- Emacs学习心得之 LaTeX编辑
目录 1. 前言 2. texlive的安装 3. AUCTEX的安装和配置 4. RefTEX的安装和配置 一.前言 本篇博文记录了Emacs下LaTeX编辑环境的搭建,参考一下文章: http:/ ...
- Android原生json和fastjson的简单使用
android原生操作json数据 主要是两个类 JSONObject 操作对象 JONSArray操作json数组 对象转json //创建学生对象 Student student=new ...
- 错误提示，解决方案java.lang.UnsatisfiedLinkError: Couldn't load easemobservice from loader dalvik.system.PathClassLoad
解决方案: 在libs下面创建一个armeabi-v7a文件夹 把armeabi *.so的文件复制一份 放在armeabi-v7a运行测试通过 关于 armeabi和armeabi-v7a 区别如下 ...
- 如何查看Windows服务器运行了多长时间
前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...