| <!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><button ng-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> |
浙公网安备 33010602011771号