angularJS商品购物车案例
<!DOCTYPE html>
<html ng-app="shopping">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>
<style type="text/css">
.orderSelect
{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div ng-controller="goodsList">
<nav class="navbar navbar-default" role="navigation">
<form class="navbar-form navbar-left" role="search">
<input type="text" ng-model="search" class="form-control" placeholder="搜索">
</form>
</nav>
<table class="table table-bordered table-hover" ng-show="goods.length">
<thead>
<tr class="success">
<!--ng-class="{dropup: order===''}"的这个部分order===''是一个表达式如果为真则添加前面的样式-->
<th ng-click="orderGoods('id')" ng-class="{dropup: order===''}">
产品编号<span class="caret" ng-class="{orderSelect: orderType==='id'}" ></span>
</th>
<th ng-click="orderGoods('name')" ng-class="{dropup: order===''}">
产品名字<span class="caret" ng-class="{orderSelect: orderType==='name'}" ></span>
</th>
<th ng-click="orderGoods('sum')" ng-class="{dropup: order===''}">
购买数量<span class="caret" ng-class="{orderSelect: orderType==='sum'}"></span>
</th>
<th ng-click="orderGoods('unitPrice')" ng-class="{dropup: order===''}">
产品单价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice'}" ></span>
</th>
<th ng-click="orderGoods('unitPrice * sum')" ng-class="{dropup: order===''}">
产品总价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice * sum'}" ></span>
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<!--可以使用过滤器提供搜索功能->filter: {name:search}-->
<tr class="info" ng-repeat="item in goods | filter: {name:search} | orderBy: order + orderType">
<td><span ng-bind="item.id"></span></td>
<td><span ng-bind="item.name"></span></td>
<td>
<input type="button" value="-" class="btn" ng-click="subNumber(item.id)"/>
<input type="text" class="text-center" ng-model="item.sum"/>
<input type="button" value="+" class="btn" ng-click="addNumber(item.id)"/>
</td>
<!--过滤器 {{xxx | currency:'￥ '}}-->
<td><span ng-bind="item.unitPrice | currency:'￥ '"></span></td>
<td><span ng-bind="item.sum * item.unitPrice | currency:'￥ '"></span></td>
<td><input type="button" value="移除" class="btn btn-danger" ng-click="remove(item.id)"/></td>
</tr>
<tr class="warning">
<td colspan="2">购买总价：<span ng-bind="sumPricesFn() | currency:'￥ '"></span></td>
<td colspan="2">购买总数：<span ng-bind="sumFn()"></span></td>
<td colspan="2"><input type="button" value="清空购物车" class="btn btn-danger" ng-click="clear()"/></td>
</tr>
</tbody>
</table>
<div ng-show="!goods.length">您的购物车为空！</div>
</div>
</div>
</body>
<script src="../angular.js"></script>
<script>
var app=angular.module("shopping",[]);
app.controller("goodsList", function($scope){
$scope.goods=[
{
id:1,
name:'苹果6Plus',
sum:3,
unitPrice:5000
},
{
id:2,
name:'苹果5s',
sum:1,
unitPrice:4000
},
{
id:3,
name:'lenovo P404',
sum:1,
unitPrice:3899
},
{
id:4,
name:'飞科剃须刀f77',
sum:10,
unitPrice:100
},
{
id:5,
name:'情侣体恤',
sum:2,
unitPrice:110
}
];
//单件商品总价
$scope.sumPricesFn = function(){
var sumPrices = 0;
angular.forEach($scope.goods,function(item){
sumPrices += item.sum * item.unitPrice;
});
return sumPrices;
};
//单件商品总数
$scope.sumFn = function(){
var sum = 0;
angular.forEach($scope.goods,function(item){
sum += Number(item.sum);
});
return sum;
};
var getIndex = function(id){
var stateIndex = -1;
angular.forEach($scope.goods, function(item, index){
if(id === item.id){
stateIndex = index;
}
});
return stateIndex;
}
//移除方法
$scope.remove = function(id){
var tmpGoodIndex = getIndex(id);
if(tmpGoodIndex !== -1){
//将从索引位置为stateIndex删除一个值
$scope.goods.splice(tmpGoodIndex, 1);
}
};
//清空购物车方法
$scope.clear = function(){
$scope.goods=[];
}
//增加商品数量
$scope.addNumber = function(id){
var tmpGoodIndex = getIndex(id);
if(tmpGoodIndex !== -1){
++$scope.goods[tmpGoodIndex].sum;
}
};
//减少商品数量
$scope.subNumber = function(id){
var tmpGoodIndex = getIndex(id);
if(tmpGoodIndex !== -1){
--$scope.goods[tmpGoodIndex].sum;
}
}; $scope.$watch('goods', function(newVal, oldVal){
angular.forEach(newVal,function(item, index){
//监听商品信息如果为非法字符那么回归原来的商品数量
if(isNaN(item.sum) || item.sum < 0){
item.sum = oldVal[index].sum;
}
});
},true);
//列表排序
/*
* $scope.order = '-';这个'-'代表倒序
* */
$scope.order = '-';
$scope.orderType = 'id';
$scope.orderGoods = function(type){
if($scope.order === '-'){
$scope.order = '';
} else {
$scope.order = '-';
}
$scope.orderType = type;
};
});
</script>
</html>
angularJS商品购物车案例的更多相关文章
- Vue(五) 购物车案例
这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...
- easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- AngularJS路由使用案例
AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 零基础学习java------34---------登录案例，域，jsp(不太懂)，查询商品列表案例（jstl标签）
一. 简单登录案例 流程图: 项目结构图 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- jQuery 购物车案例
h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...
- vue实现商品购物车全选与全不选项目实战
项目需求: 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...
随机推荐
- [LintCode] Permuation Index
Given a permutation which contains no repeated number, find its index in all the permutations of the ...
- HDU3987 Harry Potter and the Forbidden Forest（边数最少的最小割）
方法1:两遍最大流.一遍最大流后,把满流边容量+1,非满流边改为INF:再求最小割即为答案. 我大概想了下证明:能构成最小割的边在第一次跑最大流时都满流,然后按那样改变边容量再求一次最小割,就相当于再 ...
- BZOJ3739 : DZY loves math VIII
显然当且仅当$\gcd(i,j)=1$时才对答案有贡献,化简得 \[\begin{eqnarray*}ans&=&\sum_{i=1}^n\sum_{j=1}^i\mu(ij)[\gc ...
- TYVJ P1073 加分二叉树 Label：区间dp
背景 NOIP2003 提高组 第三道 描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第j个节点的 ...
- TYVJ P1078 删数 Label:区间dp
描述 有N个不同的正整数数x1, x2, ... xN 排成一排,我们可以从左边或右边去掉连续的i个数(只能从两边删除数),1<=i<=n,剩下N-i个数,再把剩下的数按以上操作处理,直到 ...
- linux下安装7z命令及7z命令的使用
本文主要介绍了在linux下安装7z命令的方法,同时介绍了7z命令的使用.7z压缩格式拥有众多优点,具有极高的压缩比率,如果你还不了解,请看文章:7z格式.LZMA压缩算法和7-Zip详细介绍. re ...
- java实现吸血鬼数字
public class Vempire { public static void main(String[] arg) { String[] ar_str1, ar_str2; ; int from ...
- 分布式架构高可用架构篇_08_MyCat在MySQL主从复制基础上实现读写分离
参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...
- Hadoop2 实战系列之1 -- Hortonworks Sandbox的安装和使用
欢迎转载,转载请注明出处,谢谢,徽沪一郎. 概要 本文主要讲述如何利用hortonworks sanbox来搭建hadoop2的学习环境.Hortonworks sanbox集成了hadoop2及其上 ...
- Nginx 笔记与总结（13）Nginx 的 gzip 压缩
使用 FireFox(40.0)访问博客园(http://www.cnblogs.com/),观察 http 头信息 请求头信息: Accept-Encoding gzip, deflate 表示浏览 ...