购物车

最新推荐文章于 2023-05-24 10:23:53 发布

赏 ༻

最新推荐文章于 2023-05-24 10:23:53 发布

阅读量390

点赞数 1

CC 4.0 BY-SA版权

分类专栏：购物车 anjular 文章标签：购物车

本文链接：https://blog.youkuaiyun.com/weixin_43256288/article/details/82804538

购物车同时被 2 个专栏收录

1 篇文章

订阅专栏

anjular

1 篇文章

订阅专栏

本文介绍了一个使用Angular框架实现的购物车应用，展示了如何通过Angular的指令和服务进行数据绑定、条件渲染和事件处理，包括商品添加、删除、修改、批量操作及排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="div">
	<span>购物车</span>
</div>

<div class="div2" ng-show="show">
	商品名称：<input type="text" placeholder="商品名称" ng-model="name12"/>
	<div class="div3" ng-show="show_name">**名称不能为空</div><br/>
	商品价格：<input type="text" placeholder="商品价格" ng-model="price12"/>
	<div class="div3" ng-show="show_price">**商品价格必须大于0并且必须是数字</div><br/>
	商品数量：<input type="text" placeholder="商品数量" ng-model="num12"/>
	<div class="div3" ng-show="show_num">**商品数量必须大于0并且必须是数字</div><br/>
	<button ng-click="add()">提交</button>
</div>


<input type="text" placeholder="名称价格查询" class="cha" ng-model="name"/>
<div class="div1">
	<input type="checkbox" class="fxk" ng-click="qx()"/>全选/反选
	<button ng-click="show_add()">添加商品</button>
	<button ng-click="plsc()">批量删除</button>
	<select ng-model="px">
		<option value="">--请选择--</option>
		<option value="fprice">价格正序</option>
		<option value="-fprice">价格倒叙</option>
	</select>
</div>
<div ng-hide="goods.length" class="gwc">购物车空空如也</div>
<table border="0" cellspacing="0" cellpadding="0">
	<tr ng-repeat="good in goods|filter:name|orderBy:px">
		<td><input type="checkbox" ng-model="good.xz"/></td>
		<td><img src="{{good.picurl}}"></td>
		<td>
			<div>{{good.fname}}</div>
			<div class="z1">价格：{{good.fprice|currency:"￥:"}}</div>
			<div>
				<button class="an" ng-click="jian(good.fsum,good.fname)">-</button>
				<input type="text" value="{{good.fsum}}" class="ji"/>
				<button class="an" ng-click="jia(good.fsum,good.fname)">+</button>
			</div>
			<div>{{good.fprice*good.fsum|currency:"￥:"}}</div>
		</td>
		<td>
			<button ng-click="del(good.fname)">删除</button>
			<button ng-click="update_price(good.fprice,good.fname)">修改价格</button>
			<button ng-click="update_all($index,good.fname,good.fprice,good.fsum)">修改数据</button>
		</td>
	</tr>
</table>
<span class="z1">总计：{{sum()|currency:"￥:"}}</span>
<button ng-click="clear()">清空</button>
<button class="an1" ng-click="shu()">去结算</button>



<script type="text/javascript">
	var mo = angular.module("myApp",[]);
	mo.controller("myCtrl",function($scope,$http){
		$http.get("fruits.json").then(function(req){
			$scope.goods = req.data;
		})
		
		$scope.sum = function(){
			var zong = 0;
			for (var i = 0; i < $scope.goods.length; i++) {
				var zz = $scope.goods[i].fprice*$scope.goods[i].fsum;
				zong +=zz;
			}
			return zong;
		}
		
		$scope.clear = function(){
			$scope.goods=[];
		}
		
		$scope.shu = function(){
			var sum = 0;
			
			for(var i = 0;i<$scope.goods.length;i++){
				sum+=$scope.goods[i].fsum*1;
			}
			alert("购买总数为："+sum+"个");
		}
		
		$scope.qx = function(){
			for (var i = 0; i < $scope.goods.length; i++) {
				$scope.goods[i].xz=!$scope.goods[i].xz;
			}
		}
		
		$scope.del = function(name){
			if(confirm("确认要删除吗？")){
				for (var i = 0; i < $scope.goods.length; i++) {
					if($scope.goods[i].fname==name){
						$scope.goods.splice(i,1);
					}
				}
			}
		}
		
		$scope.plsc = function(){
			if($(":checkbox:gt(0):checked").length==0){
				alert("至少选择一个！");
				return;
			}else{
				if(confirm("确认要删除吗？")){
					for (var i = $scope.goods.length-1; i >=0 ; i--) {
						if($scope.goods[i].xz){
							$scope.goods.splice(i,1);
						}
					}
				}
			}
			
		}
		
		$scope.jian = function(num,name){
			if(num<=0){
				alert("已经减到低了！");
				return;
			}else{
				num--;
			}
			
			for (var i = 0; i < $scope.goods.length; i++) {
				if($scope.goods[i].fname==name){
					$scope.goods[i].fsum=num;
				}
			}
		}
		
		$scope.jia = function(num,name){
			num++;
			
			for (var i = 0; i < $scope.goods.length; i++) {
				if($scope.goods[i].fname==name){
					$scope.goods[i].fsum=num;
				}
			}
		}
		
		$scope.show_add = function(){
		//	$(".div2").slideToggle();
			$scope.show=!$scope.show;
		}
		
		
		
		$scope.add = function(){
			if($scope.name12==""||$scope.name12==null||$scope.name12==undefined){
				$scope.show_name=true;
			}else{
				$scope.show_name=false;
			}
			
			if($scope.price12==""||$scope.price12==null||$scope.price12==undefined){
				$scope.show_price=true;
			}else if($scope.price12>0){
				$scope.show_price=false;
			}else{
				$scope.show_price=true;
			}
			
			if($scope.num12==""||$scope.num12==null||$scope.num12==undefined){
				$scope.show_num=true;
			}else if($scope.num12>0){
				$scope.show_num=false;
			}else{
				$scope.show_num=true;
			}
			
			
			if($scope.show_name==false&&$scope.show_price==false&&$scope.show_num==false){
				var name = $scope.name12;
				var price = $scope.price12;
				var num = $scope.num12;
				
				var aa={
					"fname": name,
					"picurl": "https://img.alicdn.com/bao/uploaded/i4/2126971650/TB2X9.twDdYBeNkSmLyXXXfnVXa_!!2126971650.jpg",
					"fprice": price,
					"fsum": num
				}
				$scope.goods.push(aa);
				$scope.show=false;
			}else{
				alert("添加信息不正确！");
				return;
			}
		}
		
		$scope.update_price=function(price,name){
			var price1 = prompt("修改"+"  '"+name+"'  "+"的价格",price);
			for (var i = 0; i < $scope.goods.length; i++) {
				if($scope.goods[i].fname==name){
					$scope.goods[i].fprice=price1;
				}
			}
		}
		var xia=0;
		$scope.update_all=function(index,name,price,num){
			$scope.show=!$scope.show;
			$scope.name12=name;
			$scope.price12=price;
			$scope.num12=num;
			xia=index;
		}
		
		$scope.add=function(){
			
			
			if($scope.name12==""||$scope.name12==null||$scope.name12==undefined){
				$scope.show_name=true;
			}else{
				$scope.show_name=false;
			}
			
			if($scope.price12==""||$scope.price12==null||$scope.price12==undefined){
				$scope.show_price=true;
			}else if($scope.price12>0){
				$scope.show_price=false;
			}else{
				$scope.show_price=true;
			}
			
			if($scope.num12==""||$scope.num12==null||$scope.num12==undefined){
				$scope.show_num=true;
			}else if($scope.num12>0){
				$scope.show_num=false;
			}else{
				$scope.show_num=true;
			}
			
			
			if($scope.show_name==false&&$scope.show_price==false&&$scope.show_num==false){
				var name = $scope.name12;
				var price = $scope.price12;
				var num = $scope.num12;
				
				var aa={
					"fname": name,
					"picurl": "https://img.alicdn.com/bao/uploaded/i4/2126971650/TB2X9.twDdYBeNkSmLyXXXfnVXa_!!2126971650.jpg",
					"fprice": price,
					"fsum": num
				}
				$scope.goods.splice(xia,1,aa);
				$scope.show=false;
			}else{
				alert("添加信息不正确！");
				return;
			}
		}
		
		
	})
</script>

在这里插入图片描述