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 ...
随机推荐
- HttpClient filter中间转发从A tomcat转发至B tomcat
BackFilter.java 主要解决基于HttpGet/HttpPost以及基于HttpPost的附件流转发import java.io.IOException; import java.io.I ...
- hudson入门
持续集成hudson入门博客分类: Java 单元测试配置管理maven项目管理Tomcat 极限编程中一项建议实践便是持续集成,持续集成是指在开发阶段,对项目进行持续性自动化编译.测 ...
- input解决浏览器记住密码问题
<input type="password" name="" id="">可以这样写 <input type=" ...
- [POJ1028]Web Navigation(栈)
这题是01年East Central North的A题,目测是签到题 Description Standard web browsers contain features to move backwa ...
- Struts中数据处理
对数据操作的3种方法(把数据保存到域中): 方式1:直接获取servletApi 核心类:ServletActionContext提供的静态方法 /** * 方式1:拿到servletApi,执行操作 ...
- css秘密花园
picture元素 http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.htmlCHAPTER ...
- 1572: [Usaco2009 Open]工作安排Job
1572: [Usaco2009 Open]工作安排Job Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 814 Solved: 365[Submit ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- Java 8并发工具包漫游指南
Java 8并发工具包简介 Java 8并发工具包由3个包组成,分别是java.util.concurrent.java.util.concurrent.atomic和java.util.concur ...
- eclipse中代码格式化组合键失效了
因为最近在整理java笔记,发现代码格式化的组合键失效了,但其他的组合键是好着的,设置里面找了也是对着的. 最后是在输入法的设置里面发现了它,原来是快捷键冲突了.取消输入法里面 的快捷键就好了,或者改 ...