<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<!--导入angular包-->
<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: "商品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: "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: "商品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"},
]
}
/*判断弹出框*/
$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;
}
}
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.cart=[];
$scope.add=function(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>
<!--ng-myapp,ng-myCtrl-->
<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>
<tr>
<td>商品类别</td>
<td>商品名称</td>
<td>商品价格</td>
<td>添加购物车</td>
</tr>
<!--过滤-->
<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>
</table>
<!--加入购物车-->
<table>
<tr>
<th>产品</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
</tr>
<tr ng-repeat="item in cart">
<td>{{item.item.name}}</td>
<!--数量num运用的是定义的变量,按照点击次数算-->
<td>{{item.num}}</td>
<td>{{item.item.price}}</td>
<td>{{item.item.price*item.num}}</td>
</tr>
</table>
</body>
</html>
angularjs按商品类型,点击加入购物车
最新推荐文章于 2022-12-28 21:36:04 发布