简单的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 ...
随机推荐
- Difficult Melody（映射）
题目链接 http://vjudge.net/contest/137242#problem/D Description You're addicted to a little game called ...
- mybatis 中的where标签
mybatis中的where标签可以去除 开头的 and 或者 or 但是放在后面的不行 失败的: <select id="countNotesByParam" parame ...
- python基础之面对对象
Python3 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- windows下React-native 环境搭建
公司决定试水react-native,mac审批还没下来,没办法,先用windows硬着头皮上吧. 参考文章: React Native 中文网官方文档 史上最全Windows版本搭建安装React ...
- SharePoint 2013 图文开发系列之可视化WebPart
有了WebPart开发的基础,再进行可视化WebPart开发,就容易多了.创建和开发过程,两者非常相似,下面,我们简单介绍下可视化WebPart的开发. 1.添加新项目,选择SharePoint 20 ...
- iOS Swift-注释与分号
iOS Swift-注释与分号 注释 注释是每门语言都存在的一种解释方式,Swift的注释与C语言的注释非常相似,单行注释采用//. //这是一个注释 在Swift中也可以使用多行注释,起始标记使用( ...
- [C#6] 6-表达式形式的成员函数
0. 目录 C#6 新增特性目录 1. 老版本的代码 internal class Person { public string FirstName { get; set; } public stri ...
- Play Framework 完整实现一个APP（十）
1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...
- Erlang/OTP 17.0-rc1 新引入的"脏调度器"浅析
最近在做一些和 NIF 有关的事情,看到 OTP 团队发布的 17 rc1 引入了一个新的特性“脏调度器”,为的是解决 NIF 运行时间过长耗死调度器的问题.本文首先简单介绍脏调度器机制的用法,然后简 ...