Angular购物车的简单实现
来源：互联网 发布：怎样检查电脑网络设置 编辑：程序博客网 时间：2024/05/21 22:27
<!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++; 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>阅读全文
0 0
- Angular购物车的简单实现
- 简单的angular实现一个购物车小功能
- Angular实现简单购物车效果(代码)
- Angular js 实现简单购物车
- Angular，js实现简单购物车功能
- angular JS简单实现购物车功能
- Angular实现购物车
- Angular实现购物车
- angular实现购物车
- angular js 简单购物车
- angular实现购物车功能
- 简单购物车的实现
- 实现简单的购物车
- 购物车的简单实现
- 购物车的简单实现
- 购物车的简单实现
- 简单购物车的实现
- 购物车的简单实现
- 如何更好的科研
- ArrayList、LinkedList、Vector的区别
- 【练习】串的堆分配实现
- 《咨询的奥秘》
- Fragement 点击变色
- Angular购物车的简单实现
- Hadoop 伪分布式搭建
- SDUT-2711 4-2 电子时钟中的运算符重载
- caffe之pooling层
- github下多个项目对应多个公钥
- 【练习】块链串的实现
- MyApp所需的基本
- 安装beego
- 继承
