angularJS商品购物车案例
2024-08-21 15:51:16
<!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>
最新文章
- selenium测试框架篇，页面对象和元素对象的管理
- 把 Mac 上的 bash 换成 zsh
- Spring中Bean的配置：基于XML文件的方式
- chart.js图表库案例赏析，饼图添加文字
- Xml Schema的用途
- 为Elasticsearch添加中文分词
- 深入了解jquery中的键盘事件
- 【转】使用unity3d需要注意到细节
- 客户Oracle数据库在插入数据的时候报超出最大长度的错误（规避风险）
- Cocos2d-x 截图功能
- httpwebrequest 用GET方法时报无法发送具有此谓词类型的内容正文
- python 按每行读取文件怎么去掉换行符
- 在Eclipse上Maven环境配置使用
- 第十四届智能车队员培训 I/O的使用 数据方向寄存器和数据寄存器的配置 MC9S12D64处理器
- I: Carryon的字符串排序(字典树/map映射）
- TCHART FROM DATATABLE
- [转]magento2项目上线注意事项 切换到产品模式
- Eclipse自己定义keystore
- ddt 数据处理调用excel数据建模
- 微信小程序official-account组件开发
热门文章
- Beat the Spread![HDU1194]
- BZOJ3461 : Jry的时间表
- Designing CSS Layouts With Flexbox Is As Easy As Pie
- 关于求解不定方程的n(n-1)=2m(m-1)的解法的总结
- object-c cocos2d-x 写程序时注意调试的技巧
- 【BZOJ】1927: [Sdoi2010]星际竞速（费用流）
- 怎么通过URL访问到服务器上的物理文件
- winform学习-----理解小概念-20160517
- C++ Generate Rand Number Array by "srand()" 生成随机数
- 编写一个名为Test的主类，类中只有一个主方法； 在主方法中定义一个大小为50的一维整型数组，数组名为x，数组中存放着{1， 3，5,…,99}输出这个数组中的所有元素，每输出十个换一行；在主方法中定义一 个大小为10*10的二维字符型数组，数组名为y，正反对角线上存的是‘*’，其余 位置存的是‘#’；输出这个数组中的所有元素。