<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clear:after{
content: "";
display: block;
0;
height: 0;
clear: both;
}
li{
list-style: none;
700px;
}
.left{
float: left;
}
.right{
float: right;
margin-top: 50px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function($scope){
$scope.data={
categories:[{id:"101",category:"商品01"},
{id:"102",category:"商品02"},
{id:"103",category:"商品03"},
{id:"103",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:"101",imgsrc:"../images/TB1_50x50.jpg"},
{category:"商品01",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"../images/TB2_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:"商品04",name:"插线板",desc:"2013夏季爆款",price:"601",imgsrc:"../images/TB2_50x50.jpg"}
]
};
//添加购物车
$scope.cart=[];
$scope.add=function(item){
var has=false;
for(var i=0;i<$scope.cart.length;i++){
if($scope.cart[i].item.name==item.name){
has=true;
$scope.cart[i].num++;
break;
}else{
has=false;
}
}
if(has==false){
$scope.cart.push({item:item,num:1})
}
//console.log($scope.cart)
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<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>
</tr>
</tbody>
</table>
<ul>
<li class="clear" ng-repeat="item in data.products">
<div class="left">
<h2><span>{{item.name}}</span><span>{{item.category}}</span></h2>
<img ng-src="{{item.imgsrc}}"><span>{{item.desc}}</span>
</div>
<div class="right">
<span>{{item.price|currency:"￥"}}</span><br/>
<button ng-click="add(item)">添加到购物车</button>
</div>
</li>
</ul>
</body>
</html>