angularJs shoppingCar

最新推荐文章于 2021-04-05 16:16:11 发布

神秘的玖零

最新推荐文章于 2021-04-05 16:16:11 发布

阅读量196

点赞数

文章标签： android

本文链接：https://blog.csdn.net/zihang0814/article/details/78322214

版权

angularJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="../angular-1.5.5/angular.min.js"></script>
	<script>
	var myapp=angular.module("myapp",[]);
	myapp.controller("myCtrl",function($scope){
	$scope.data = {
	categories: [{check: false, category: "商品01"},
	{check: false, category: "商品02"},
	{check: false, category: "商品03"},
	{check: false, category: "商品04"}],
	//商品明细
	products: [
	{category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
	{category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
	{category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品01", name: "鼠标", desc: "2016春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
	{category: "商品01", name: "键盘", desc: "2016夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
	{category: "商品01", name: "主机", desc: "2016秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品01", name: "显示器", desc: "2016冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品02", name: "鼠标", desc: "2015春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
	{category: "商品02", name: "键盘", desc: "2015夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
	{category: "商品02", name: "主机", desc: "2015秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品02", name: "显示器", desc: "2015冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品03", name: "鼠标", desc: "2014春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
	{category: "商品03", name: "键盘", desc: "2014夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
	{category: "商品03", name: "主机", desc: "2014秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品03", name: "显示器", desc: "2014冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品04", name: "鼠标", desc: "2013春季爆款", price: "101", imgsrc: "images/TB1_50x50.jpg"},
	{category: "商品04", name: "键盘", desc: "2013夏季爆款", price: "601", imgsrc: "images/TB2_50x50.jpg"},
	{category: "商品04", name: "主机", desc: "2013秋季爆款", price: "3001", imgsrc: "images/TB3_50x50.jpg"},
	{category: "商品04", name: "显示器", desc: "2013冬季爆款", price: "1001", imgsrc: "images/TB3_50x50.jpg"}
	]
	};
	//获取选取的内容

	$scope.fun=function(){
	var n=0;
	var j=0;
	for(var i=0;i<$scope.data.categories.length;i++){
	if($scope.data.categories[i].check==true){
	n++;
	j=i;
	}
	}
	console.log(n);
	if(n==0){
	alert("啥都没选");
	}else if(n>=2){
	alert("选多了");
	}else if(n==1){
	alert($scope.data.categories[j].category);
	$scope.sel=$scope.data.categories[j].category;
	}
	};

	//过滤商品
	/* $scope.catFilter=function(item){
	//console.log(item);
	if($scope.sel==item.category\|\|$scope.sel==null){
	return true;
	}else{
	return false;
	}
	};*/
	//添加购物车
	$scope.cart=[];
	$scope.add=function(item){
	//console.log(item);
	var has=false;
	for(var i=0;i<$scope.cart.length;i++){
	if(item.name==$scope.cart[i].item.name){
	console.log(1);
	has=true;
	$scope.cart[i].num++;
	break;
	}else{
	console.log(0);
	has=false;
	}
	};
	if(has==false){
	$scope.cart.push({item:item,num:1});
	}
	}
	});
	</script>
	</head>
	<body ng-app="myapp" ng-controller="myCtrl">
	<ul>
	<li ng-repeat="item in data.categories">
	<input type="checkbox" ng-model="item.check">
	{{item.category}}
	</li>
	</ul>
	<button ng-click="fun()">选取对应商品</button>
	<table>
	<thead>
	<tr>
	<td>商品类别</td>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>添加购物车</td>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in data.products\|filter:sel">
	<td>{{item.category}}</td>
	<td>{{item.name}}</td>
	<td>{{item.price}}</td>
	<td><buttonng-click="add(item)">添加购物</button></td>
	</tr>
	</tbody>
	</table>
	<h2>购物车</h2>
	<table>
	<thead>
	<tr>
	<th>产品</th>
	<th>数量</th>
	<th>价格</th>
	<th>小计</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in cart">
	<td>{{item.item.name}}</td>
	<td>{{item.num}}</td>
	<td>{{item.item.price}}</td>
	<td>{{item.item.price*item.num}}</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>