简单的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 ...
随机推荐
- iOS面试用到的一些知识点和技术
1.APP的生命周期和viewcontroler的生命周期? 答:APP的生命周期:在APP的代理中分为七个阶段: 1.将要启动 2.已经启动 3.将要进入非活动状态 4.进入后台 5.从后台进入前台 ...
- linux 下添加库的加载路径的方式
linux 下有两种添加加载库路径的方式: 1．修改环境变量: export LD_LIBRARY_PATH=path_name 2.修改配置文件 修改 /etc/ld.so.conf 的内容在最后添 ...
- php 使用htmlspecialchars() 和strip_tags函数过滤HTML标签的区别
原文地址:http://www.manongjc.com/article/1103.html 先来看一下htmlspecialchars函数和strip_tags函数的使用实例: <?php $ ...
- 本地部署arcgis by eclipse
首次来博客园发帖,从本地部署arcgis api开始吧: 首先还是下载arcgis的api包开始,在中国区官网下载arcgis包: 1.http://support.esrichina.com.cn/ ...
- angularjs+微信，解决chooseImage不能预览的问题
在wx.chooseImage的success回调中直接进行数据绑定,却在ng-repeat时发现ng-src不加载微信localId的问题,类似wxLocalResource://imageid98 ...
- SharePoint 2013 扩展查阅项功能
SharePoint 2013的查阅项功能,就是可以扩展其他列表字段为当前列表选项,但是选项太多的时候,会造成选择起来非常麻烦,所以,我们采取JS+Ajax的方式,改善一下这个展示,使操作更加方便. ...
- iOS crash 追终 ,iOS 如何定位crash 位置
https://developer.apple.com/library/ios/technotes/tn2151/_index.html 错误分析是基于设备中的crash log 与 编译文件时生成的 ...
- iPad编程
1. iPad 现有型号: iPad Pro, iPad Air, iPad mini 均配备Retina显示屏.早期还有iPad 依次对应的坐标系及分辨率: iPad Pro 坐标系:1366 x ...
- fillStyle图片填充
图片自找 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas ...
- Git的冲突解决过程
下面图是我总结一次提交遇到冲突解决的过程. 1. 把本地工作区的修改提交到本地仓库 2. 从远程仓库拉取代码,与本地仓库合并(pull = fetch + merge) 3. 本地仓库的代码推送回工作 ...