选取对应的商品

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

android1986

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

阅读量212

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsq110/p/7711003.html

版权

<!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>

转载于:https://www.cnblogs.com/wsq110/p/7711003.html

android1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选取对应的商品

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular-1.5.5/angular.min.js"></script> ...
复制链接

扫一扫