<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 310px;
height: 400px;
margin: auto;
background: silver;
}
img{
width: 80px;
height: 80px;
}
dl{
border-bottom: 1px solid silver;
margin-bottom: 8px;
padding: 5px;
width: 300px;
height: 80px;
float: left;
}
dd{
margin-bottom: 4px;
}
.che,.pic{
float: left;
}
.pic{
margin-left: 5px;
margin-right: 5px;
}
.che{
line-height:80px ;
}
.cont{
font-size: 14px;
}
.price{
font-size: 12px;
color: sandybrown;
}
.jia,.jian{
width: 20px;
height: 20px;
}
.del{
float: right;
margin-right: 10px;
color: red;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("myApp",[]).controller("myCtrl",
function($scope) {
$scope.arrs = [{
"id":1,
"spic": "img/render1_1x.jpg",
"stitle": "纯手工制作木质时钟精致家居装饰摆件",
"sprice": 150,
"snum": 1,
"state":false
}, {
"id":2,
"spic": "img/space_1x.jpg",
"stitle": "木质蓝牙音箱包邮实木家具装饰摆件",
"sprice": 119,
"snum": 2,
"state":false
}, {
"id":3,
"spic": "img/trees_1x.jpg",
"stitle": "装饰木雕,独特趣味设计家居装饰摆件",
"sprice": 120,
"snum": 1,
"state":false
}]
//删除
$scope.del=function(a){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}
//增加数量
$scope.jia=function(a){
a.snum=a.snum+1;
}
//减少数量
$scope.jian=function(a){
if(a.snum<=1){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}else{
a.snum=a.snum-1;
}
}
//总价
$scope.sumAll=function(){
var sum=0;
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
sum+=$scope.arrs[i].snum*$scope.arrs[i].sprice;
}
}
return sum;
}
//全选
$scope.check=function(){
var is=$scope.ischeck;
for(var i=0;i<$scope.arrs.length;i++){
$scope.arrs[i].state=is;
}
}
//选中的数量
$scope.numAll=function(){
var num=0;
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
num+=$scope.arrs[i].snum;
}
}
return num;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="box">
<h2 style="text-align: center;margin-bottom: 8px;margin-top: 8px;">购物车</h2>
<hr />
<input type="checkbox" style="margin-top: 20px;margin-bottom: 10px;"/> 趣艺工坊
<hr />
<dl ng-repeat="a in arrs">
<dd class="che"><input type="checkbox" ng-model="a.state"/></dd>
<dt class="pic"><img src={{a.spic}}></dt>
<dd class="cont">{{a.stitle}}</dd>
<dd class="price">{{a.sprice|currency:"¥"}}</dd>
<div class="chang">
<input type="button" value="-" class="jian" ng-click="jian(a)"/>
<span class="num">{{a.snum}}</span>
<input type="button" value="+" class="jia" ng-click="jia(a)"/>
<input type="button" value="删除" class="del" ng-click="del(a)"/>
</div>
</dl>
</div>
<div style="width: 310px;height: 60px;background: saddlebrown;margin: auto;">
<input type="checkbox" style="float: left;" ng-model="ischeck" ng-click="check()"/> 全选
<input type="button" value="结算" style="background: sandybrown;color: white; float: right;"/>
<p style="float: right;">合计:<span ng-bind="sumAll()|currency:'¥:'"></span>数量:<span ng-bind="numAll()"></span></p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 310px;
height: 400px;
margin: auto;
background: silver;
}
img{
width: 80px;
height: 80px;
}
dl{
border-bottom: 1px solid silver;
margin-bottom: 8px;
padding: 5px;
width: 300px;
height: 80px;
float: left;
}
dd{
margin-bottom: 4px;
}
.che,.pic{
float: left;
}
.pic{
margin-left: 5px;
margin-right: 5px;
}
.che{
line-height:80px ;
}
.cont{
font-size: 14px;
}
.price{
font-size: 12px;
color: sandybrown;
}
.jia,.jian{
width: 20px;
height: 20px;
}
.del{
float: right;
margin-right: 10px;
color: red;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("myApp",[]).controller("myCtrl",
function($scope) {
$scope.arrs = [{
"id":1,
"spic": "img/render1_1x.jpg",
"stitle": "纯手工制作木质时钟精致家居装饰摆件",
"sprice": 150,
"snum": 1,
"state":false
}, {
"id":2,
"spic": "img/space_1x.jpg",
"stitle": "木质蓝牙音箱包邮实木家具装饰摆件",
"sprice": 119,
"snum": 2,
"state":false
}, {
"id":3,
"spic": "img/trees_1x.jpg",
"stitle": "装饰木雕,独特趣味设计家居装饰摆件",
"sprice": 120,
"snum": 1,
"state":false
}]
//删除
$scope.del=function(a){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}
//增加数量
$scope.jia=function(a){
a.snum=a.snum+1;
}
//减少数量
$scope.jian=function(a){
if(a.snum<=1){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}else{
a.snum=a.snum-1;
}
}
//总价
$scope.sumAll=function(){
var sum=0;
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
sum+=$scope.arrs[i].snum*$scope.arrs[i].sprice;
}
}
return sum;
}
//全选
$scope.check=function(){
var is=$scope.ischeck;
for(var i=0;i<$scope.arrs.length;i++){
$scope.arrs[i].state=is;
}
}
//选中的数量
$scope.numAll=function(){
var num=0;
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
num+=$scope.arrs[i].snum;
}
}
return num;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="box">
<h2 style="text-align: center;margin-bottom: 8px;margin-top: 8px;">购物车</h2>
<hr />
<input type="checkbox" style="margin-top: 20px;margin-bottom: 10px;"/> 趣艺工坊
<hr />
<dl ng-repeat="a in arrs">
<dd class="che"><input type="checkbox" ng-model="a.state"/></dd>
<dt class="pic"><img src={{a.spic}}></dt>
<dd class="cont">{{a.stitle}}</dd>
<dd class="price">{{a.sprice|currency:"¥"}}</dd>
<div class="chang">
<input type="button" value="-" class="jian" ng-click="jian(a)"/>
<span class="num">{{a.snum}}</span>
<input type="button" value="+" class="jia" ng-click="jia(a)"/>
<input type="button" value="删除" class="del" ng-click="del(a)"/>
</div>
</dl>
</div>
<div style="width: 310px;height: 60px;background: saddlebrown;margin: auto;">
<input type="checkbox" style="float: left;" ng-model="ischeck" ng-click="check()"/> 全选
<input type="button" value="结算" style="background: sandybrown;color: white; float: right;"/>
<p style="float: right;">合计:<span ng-bind="sumAll()|currency:'¥:'"></span>数量:<span ng-bind="numAll()"></span></p>
</div>
</body>
</html>