angular购物车
<body ng-app> <div class="container" ng-controller="carController">
<table class="table" ng-show="cart.length">
<thead>
<tr>
<th>产品编号</th>
<th>产品名字</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr> </thead>
<tbody>
<tr ng-repeat="item in cart">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button>
<input type="text" value=" {{item.quantity}}" ng-model="item.quantity"/>
<button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.price * item.quantity}}</td>
<td>
<button type="button" ng-click="remove(item.id)" class="btn btn-primary">移除</button>
</td>
</tr>
<tr> <td>总购买价</td>
<td>{{totalPrice()}}</td>
<td>总购买数</td>
<td>{{totalQuantity()}}</td>
<td colspan="2">
<button type="button" ng-click="clearAll()" class="btn btn-primary">清空购购物车</button>
</td> </tr>
</tbody>
</table>
<p ng-show="!cart.length">你的购物车为空</p>
</div> </body>
/**
* Created by bh on 2016/4/24.
*/
var carController = function($scope){
$scope.cart = [
{
id:1000,
name:"iphone5s",
quantity:3,
price:4300
},
{
id:3300,
name:"iphone5",
quantity:30,
price:3300
},
{
id:232,
name:"mac",
quantity:3,
price:23000
},
{
id:1400,
name:"ipad",
quantity:5,
price:6900
}
]; //计算总价
$scope.totalPrice= function(){
var total = 0;
angular.forEach($scope.cart,function(item){
total +=item.quantity * item.price;
})
return total;
}
//计算总价
$scope.totalQuantity= function(){
var total = 0;
angular.forEach($scope.cart,function(item){
total +=parseInt(item.quantity);
})
return total;
}
var findIndex =function(id){
var index = -1;
angular.forEach($scope.cart,function(item,key){
if(item.id === id){
index = key; }
});
return index;
}
$scope.add=function(id){
var index = findIndex(id);
if(index!== -1){
++$scope.cart[index].quantity;
}
}
$scope.reduce=function(id){
var index = findIndex(id);
if(index!== -1){
var item = $scope.cart[index];
if(item.quantity > 1){
--item.quantity;
}else{
var returnKey = confirm("是否从购物车内删除该商品");
if(returnKey){
$scope.remove(id)
}
} }
} //移除
$scope.remove=function(id){
var index = findIndex(id) if (index !== -1) {
$scope.cart.splice(index, 1)
}
}
$scope.$watch("cart",function(newValue,oldValue){
angular.forEach(newValue,function(item,key){
if(item.quantity < 1){
var returnKey = confirm("是否从购物车内删除该商品");
if(returnKey){
$scope.remove(item.id)
}else{
item.quantity = oldValue[key].quantity
}
}
})
}) $scope.clearAll=function(){
$scope.cart = {}
} }
格式：
var objs =[{a:1},{a:2}];
angular.forEach(objs, function(data,index,array){
//data等价于array[index]
console.log(data.a+'='+array[index].a);
});
参数如下：
objs：需要遍历的集合
data:遍历时当前的数据
index:遍历时当前索引
array:需要遍历的集合，每次遍历时都会把objs原样的传一次。
angular购物车的更多相关文章
- 简单的angular购物车商品小计
<!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...
- angular做的简单购物车
虽然本人也是刚刚才开始学习angular.js,并不是非常会,但是这并不能阻止我对angular的喜爱.因为它太省代码了,比如说一个比较简单的购物车,就是只有商品名称,单价,数量,小计,总计和删除功能 ...
- angularjs购物车练习
本文是一个简单的购物车练习,功能包括增加.减少某商品的数量,从而影响该商品的购买总价以及所有商品的购买总价:从购物车内移除一项商品:清空购物车. 页面效果如图: 若使用js或jQuery来实现这个页面 ...
- Angular实现简单数据计算与删除
AngularJS 1)什么是AngularJS AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. ...
- 简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- angular初始用——简易购物车
<html> <head> <meta charset="utf-8"> <script src="js/angular.js& ...
- Angular实现购物车计算
使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...
- (网页)angular js 终极购物车(转)
转自CSDN: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Angular实现购物车全选
直接上代码 <!DOCTYPE html> <html ng-app="myApp" > <head> <meta charset=&qu ...
随机推荐
- Debian安装Oracle Java步骤
在Debian下安装OpenJDK使用apt命令非常方便的安装,但安装Oracle就需要手动了,这里需了解ln和update-alternatvies命令. ln链接 首先我们来说说linux的链接, ...
- Docker存储驱动之Device Mapper简介
Device Mapper是一个基于kernel的框架,它增强了很多Linux上的高级卷管理技术.Docker的devicemapper驱动在镜像和容器管理上,利用了该框架的超配和快照功能.为了区别, ...
- java入门知识
Java特性 简单.面向对象.支持网络.解释性.健壮性.安全性.高性能.可移植(跨平台) Java特点 开源.免费.跨平台.面向对象 应用平台 JavaSE(standard edition)(c/s ...
- Java的一些基础知识
1.do-while循环不论循环条件判断结果,至少会执行一次. 2.Javac用于Java源代码文件编译成字节码的编译器. 3.import关键字导入包. 4.Java是Sun公司与1995年退出的高 ...
- 梳理下Cordova的热更新
公司的大部分都是Hybrid 产品,也就是混合开发,所以比较重要的一个核心功能就是热更新了. 做这个功能的时候中间碰到不少坑,记录一下,比较简单,大致思想就是从服务器拉取JS文件替换掉本地对应文件 之 ...
- node.js报错throw err; // Rethrow non-MySQL errors e:\serverTest\node_modules\mysql\lib\protocol\Parser.js:79 解决方法
今天在用node+angular做后台时,需要使用session保存登陆状态的时候,遇到了此问题,问题直译为非mysql问题,我也在后台取到的登陆用户名和密码,确实不是数据库问题.最后发现在使用ses ...
- iOS开发之Quartz2D
1. Quartz2D概述及作用 Quartz2D的API是纯C语言的,Quartz2D的API来自于Core Graphics框架. 数据类型和函数基本都以CG作为前缀,比如: CG ...
- 设计模式的征途—1.单例（Singleton）模式
单例模式属于创建型模式的一种,创建型模式是一类最常用的设计模式,在软件开发中应用非常广泛.创建型模式将对象的创建和使用分离,在使用对象时无需关心对象的创建细节,从而降低系统的耦合度,让设计方案更易于修 ...
- parentNode和parentElement区别
parentNode跟parentElement除了前者是w3c标准,后者只ie支持 当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null 一般 ...
- SEQ序号与ACK序号理解总结
备查 SEQ序号与ACK序号理解总结