简单购物车可加减

来源：互联网发布：fc2域名用不了2017 编辑：程序博客网时间：2024/04/20 09:46

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<center>

<table border="1px" cellspacing="1" cellpadding="1" width="500px">
<tr ng-repeat="x in good" align="center">
<td><input type="checkbox" ng-model="x.check"/></td>
<td>{{x.name}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)"/>
{{x.count}}
<input type="button" value="+" ng-click="jia($index)"/>
</td>
<td>{{x.price}}</td>
<td ng-click="shanchu($index)">删除</td>
</tr>
</table>
<br /><br />
<input type="checkbox" ng-model="mqx" ng-click="qx()"/>全选
   合计<span ng-bind="sum()">0</span>

</center>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.good=[
{"check":false,
"name":"你好啊我来拉别跑啊",
"count":1,
"price":650
},
{"check":false,
"name":"我爱你挣扎呢个十年护你",
"count":1,
"price":350
},
{"check":false,
"name":"我们是不可能的",
"count":1,
"price":150
}
];
//增加的代码
$scope.jia=function($index){
$scope.good[$index].count++;

}
//减少的代码
$scope.jian=function($index){
//大于1较减少否则删除
if($scope.good[$index].count>1){
$scope.good[$index].count--;
}else{
$scope.good.splice($index,1);

}
}

//删除的代码
$scope.shanchu=function($index){
$scope.good.splice($index,1);

}
//总数的代码
$scope.sum=function(){

var n=0;
for (var i=0;i<$scope.good.length;i++) {
if($scope.good[i].check){
n+=$scope.good[i].price*$scope.good[i].count;

}
}
return n;
}

//全选
$scope.qx=function(){
if($scope.mqx){

for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=true;

}
}else{

for (var i=0;i<$scope.good.length;i++) {
$scope.good[i].check=false;
}

}
}

})

</script>
</html>

阅读全文

0 0