Angular购物车的简单实现
2017-10-22 18:46
411 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.nx="";
$scope.nc="";
$scope.jj="";
$scope.jg="";
$scope.addgoods=function () {
alert(0)
$scope.data.products.push({category:$scope.nx,name:$scope.nc,desc:$scope.jj,price:$scope.jg,imgsrc:"images/TB1_50x50.jpg",done:false});
}
$scope.data={
categories:[{id:"101",category:"商品01",done:false},
{id:"102",category:"商品02",done:false},
{id:"103",category:"商品03",done:false},
{id:"103",category:"商品04",done:false}],
//商品明细
products:[
{category:"商品01",name:"鼠标",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品01",name:"键盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品01",name:"显示器",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品01",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品02",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品02",name:"显示器",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品02",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品02",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品03",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品03",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品04",name:"插线板",desc:"2013夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
{category:"商品04",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
{category:"商品04",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
]
};
//触发出發checkbox的事件
$scope.dj=function () {
var s=0; //計數到底勾選了幾個
var j=0; //傳遞下標作用
for(var i=0;i<$scope.data.categories.length;i++){
if($scope.data.categories[i].done==true){
s++;
4000
j=i;
}
}
if(s>=2){
alert("您勾选了"+(j+1));
}
else
if(s==0){
alert("您還沒有勾選");
}
else
if(s==1){
$scope.ss=$scope.data.categories[j].category;
}
};
//进行全选
$scope.xz=false;
$scope.quanxuan=function () {
if($scope.xz==true){
for (var i=0;i<$scope.dd.length;i++){
$scope.dd[i].done=true;
}
}else{
for (var i=0;i<$scope.dd.length;i++){
$scope.dd[i].done=false;
}
}
}
/*//进行反选
$scope.fx=function (index) {
for(var i=0,i<$scope.dd.length,i++){
if($scope.dd[i].done==true){
$scope.xz=true;
}else {
$scope.xz=false;
}
}
}*/
$scope.dd=[];
$scope.zj=false;
//点击添加到购物车
$scope.add=function (item) {
$scope.has=false;// //判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
for(var i=0;i< $scope.dd.length;i++){
//判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
if( $scope.dd[i].name==item.name){
$scope.has=true;
$scope.dd[i].num++; //如果是同一件商品添加的时候就让数量加加
break;
}else{
$scope.has=false;
}
}
//判断$scope.has为false时说明是不一样的商品
if($scope.has==false){
$scope.dd.push({name:item.name,num:1,price:item.price,done: $scope.zj});
}
}
//点击删除的事件
$scope.del=function (index) {
//判断数量如果数量大于等于2时让数量减减，否则就从数组中删除
if($scope.dd[index].num>=2){
$scope.dd[index].num--;
}else if($scope.dd[index].done==true){
$scope.dd.splice(index,1);
}
}
//批量删除
$scope.delAll=function () {
for(var i=0;i<$scope.dd.length;i++){
if($scope.dd[i].done==true){
$scope.dd.splice(i,1);
i--;
}
}
}
//计算总价
$scope.zongjia=function () {
var zj=0;
for(var i=0;i<$scope.dd.length;i++){
zj+=$scope.dd[i].num*$scope.dd[i].price;
}
return zj;
}
});
</script>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>商品类型:</span><input type="text" ng-model="nx"/>
<span>商品名称:</span><input type="text" ng-model="nc"/>
<span>季节商品:</span><input type="text" ng-model="jj"/>
<span>商品价格:</span><input type="text" ng-model="jg"/>
<button ng-click="addgoods()">添加商品</button>
<ul>
<li ng-repeat="item in data.categories">
<input type="checkbox" ng-click="dj()" ng-model="item.done"/>
<span>{{item.category}}</span>
</li>
</ul>
<table>
<tr>
<th><input type="checkbox" ng-model="xz" ng-click="quanxuan()"/>全選</th>
<th>名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作<button ng-click="delAll()">批量删除</button></th>
</tr>
<tr ng-repeat="item in dd">
<td> <input type="checkbox" ng-model="item.done" ng-click="fx($index)" /></td>
<td>{{item.name}}</td>
<td>{{item.num}}</td>
<td>{{item.price}}</td>
<td>{{item.price*item.num}}</td>
<td><button ng-modle="item.done" ng-click="del($index)">删除</button></td>
</tr>
</table>
<p>总价：<span>{{zongjia()}}</span></p>
<ul>
<li ng-repeat="item in data.products|filter:ss">
<table>
<tr>
<td>
<p>{{item.category+item.name}}</p>
</td>
<td rowspan="2" style="width: 400px;margin-bottom: 1px">
<p style="font-size: 10px">{{item.desc}}</p>
</td>
<td>{{item.price|currency:"￥"}}</td>
</tr>
<tr>
<td><img src="{{item.imgsrc}}" style="width: 60px;height: 60px">
</td>
<td><button ng-click="add(item)">添加到购物车</button></td>
</tr>
</table>
</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angular，js实现简单购物车功能
- 使用Angular.js实现简单的购物车功能
- 简单的angular实现一个购物车小功能
- Angular实现简单购物车效果(代码)
- 使用session实现简单的购物车 （将点击了购买链接的书籍放到购物车页面显示出来）。
- 简单实现购物车相同物品累加
- 简单购物车的实现
- 一个简单的方法实现购物车小球动画
- 使用MongoDB和JSP实现一个简单的购物车系统实例
- 简单实现IONIC购物车功能
- AngularJS ng-bind 指令简单实现
- Angular实现一个简单的多选复选框的弹出框指令
- JQuery UI 关于拖拉商品到购物车构思的简单实现
- Deferred在jQuery和Angular中的使用与简单实现
- angular简单的购物车
- 用Cookie和Session简单实现购物车
- Session对象的应用：实现简单的购物车的功能
- angular.js框架简单实现加载无限加载商品
- vue2实现简单的商品加入购物车和结算功能（前端数据保存方向）
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品，删除购物商品并且显示购物车信息。