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 ...
随机推荐
- 如何配置多台mysql 服务器？
当我们数据量增大时,数据库需要进行扩张时,或者做高可用,那么我们就需要用到同时多台mysql服务器.通过配置:可以实现,一台主mysql,负责记录数据的变化,多台从mysql,查询结果.修改文件:/w ...
- 2017-3-9 SQL server 数据库
数据库的定义:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单说数据库是一些存储在硬盘上的数据文件,随着信息技术和市场的发展,数据管理不再仅仅是存储和管理数据,而转变成用户所 ...
- Troubleshooting OpenStack Bug- 每天5分钟玩转 OpenStack（162）
这是 OpenStack 实施经验分享系列的第 12 篇. 问题描述 客户报告了一个问题:对 instance 执行 migrate 操作,几个小时了一直无法完成,不太正常. 问题分析 遇到这种情况, ...
- Vue基本入门
介绍 1.Vue.js是什么? Vue.js(读音:/vju:/,类似于view)是一套构建用户界面的渐进式框架,与其他重量级框架不同的是,Vue采用的是自底向上增量开发的设计. Vue的核心库只关注 ...
- SEO-关键词密度与友情链接交换技巧
关键词密度 关键词密度 关键词密度与关键词频率所阐述的实质上是同一个概念,用来量度关键词在网页上出现的总次数与其他文字的比例,一般用百分比表示.相对于页面总字数而言,关键词出现的频率越高,关键词密度也 ...
- Ubuntu 开机启动是出现 grub rescue 解决办法
最近想在Ubuntu的基础上,再在硬盘的一个分区安装Windows,其中有次不小心,在安装windows的时候,删除了一个分区,造成下次启动Ubuntu系统出现 grub rescue 下面是我的修复 ...
- AVFoundation之如何从摄像头获取图像
前言: 最近项目有个需求是对试图对手机密码进行强破解的人进行拍照(通过摄像头截图),因为之前没做过,所以一堆坑.现在就把我的经验都分享出来,希望后来人不用再踏上坑途中. 直接上代码: // 创建会话 ...
- Win7下Nginx的安装与配置，win7nginx配置
环境介绍:Win7 64位SP1 Nginx版本:nginx/1.8.0 参考链接http://nginx.org/en/docs/windows.html 1. 下载nginx1.8.0版本: h ...
- Hibernate写配置文件无提示信息解决
把Hibernate的相关jar包引入工程后,在配置hibernate.cfg.xml时没有提示信息,对于开发人员来说,那么多标签,标签有那么多属性,全部都记住显然是不可能的,遇到这种情况是很头疼的事 ...
- 2017java预备作业2
1 安装git • 到Git官网https://www.git-scm.com/ 下载Git客户端 • 安装时选择默认即可. • 安装完成后在桌面的快捷菜单中选择Git Bash Here 或者在开始 ...