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 ...
随机推荐
- Mac下ssh连接远程服务器时自动断开问题
在mac下使用securecrt通过ssh连接远程服务器时,总会一段时间没有动作后,ssh被自动断开.在windows下用xmanager貌似没有遇到过这个问题. 在网上找了解决方法如下: 客户端配置 ...
- github学习（二）
Git学习(一) 学习github一定要学会git,否则在后续的github运用中会出现很多问题. 1.安装Git: Mac自带Git,Windows需要自己安装. 2.配置git: 配置user.n ...
- daterangepicker 时间插件
在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="repo ...
- Jenkins+Git 持续集成
持续集成是必要的! 希望达到的效果是:开发同事签入代码后,对应的站点可以自动实现更新.目前还只在在内部服务器上实现开发环境中的站点更新,不涉及到线上的发布. 目前使用Jenkins实现这样的持续集成. ...
- 通过 Composer Github Packagist制作发布共享PHP包
参考来源: https://laravel-china.org/topics/1002 https://rivsen.github.io/post/how-to-publish-package-to- ...
- 算法模板——Trie树
实现功能——实现对于不同字符串以及之前出现过的字符串的识别,对于单个长度为L的字符串,复杂度为O(L); 代码不难懂,直接上(在识别字符串方面,个人觉得其好处远远大于hash识别——1.理论上都是O( ...
- Microsoft Visual Studio 2017 安装过程
工欲善其事必先利其器 Visual Studio 2017 正式版官方下载地址:https://www.visualstudio.com/downloads/ 安装vs2017的时候最好关闭已打开的v ...
- 读headFirst设计模式 - 装饰者模式
继承可以在复用父类代码的情况下扩展父类的功能,但同时继承增加了对象之间的耦合度,所以要慎用继承.那么有没有既能扩展父类的功能,又能使对象间解耦的方法呢?答案是肯定的,这就是我们今天要学习的装饰者模式. ...
- 【转】对Django框架架构和Request/Response处理流程的分析
本文转载于疯狂的蚂蚁. 一. 处理过程的核心概念 如下图所示django的总览图,整体上把握以下django的组成: 核心在于中间件middleware,django所有的请求.返回都由中间件来完成. ...
- pyhton中的Queue（队列）
什么是队列? 队列就像是水管子,先进先出,与之相对应的是栈,后进先出. 队列是线程安全的,队列自身有机制可以实现:在同一时刻只有一个线程在对队列进行操作. 存数据,取数据 import Queue q ...