实现简单购物车

最新推荐文章于 2024-07-16 21:37:23 发布

MissGentlemen

最新推荐文章于 2024-07-16 21:37:23 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/MissGentlemen/article/details/78854037

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<style>
span {
color: orange;
}
</style>
</head>

<body ng-app="MyApp" ng-controller="MyCont">
<table>
<tr>
<td><input type="checkbox" ng-model="q1" ng-checked="ck" ng-click="dian()" /></td>
<td><img src="img/aa.png" /></td>
<td>哈哈阿斯达所大所多<br/><span>150</span><br/><input type="button" value="+" ng-click="aa()" />{{i1}}<input type="button" value="-" ng-click="dd()" /></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="q2" ng-checked="ck" ng-click="dian1()" /></td>
<td><img src="img/bb.png" /></td>
<td>嘿嘿都大傻吊阿萨德<br/><span>119</span><br/><input type="button" value="+" ng-click="bb()" />{{i2}}<input type="button" value="-" ng-click="ee()" /></td>
</tr>
<tr>
<td><input type="checkbox" ng-model="q3" ng-checked="ck" ng-click="dian2()" /></td>
<td><img src="img/cc.png" /></td>
<td>呵呵阿收到了吗sad<br/><span>120</span><br/><input type="button" value="+" ng-click="cc()" />{{i3}}<input type="button" value="-" ng-click="ff()" /></td>
</tr>
</table>
<br />
<input type="checkbox" ng-model="ck" ng-click="quan()"/>全选            合计:￥
<span>{{one*150+two*119+three*120}}</span><input type="button" value="结算" />
<script>
var mo = angular.module("MyApp", []);
mo.controller("MyCont", function($scope) {
$scope.i1=0;
$scope.i2=0;
$scope.i3=0;
$scope.one = $scope.i1;
$scope.two = $scope.i2;
$scope.three = $scope.i3;
var flag1=false;
var flag2=false;
var flag3=false;
$scope.dian = function() {
if($scope.q1) {
flag1=true;
$scope.one=$scope.i1
}else{
flag1=false;
$scope.one = 0;
}

}
$scope.dian1 = function() {
if($scope.q2) {
flag2=true;
$scope.two=$scope.i2
}else{
flag2=false;
$scope.two = 0;
}
}
$scope.dian2 = function() {
if($scope.q3) {
flag3=true;
$scope.three=$scope.i3
}else{
flag3=false;
$scope.three = 0;
}
}
$scope.quan=function(){
if($scope.ck){
$scope.one=$scope.i1
$scope.two=$scope.i2
$scope.three=$scope.i3
flag1=true;
flag2=true;
flag3=true;
}else{
$scope.one=0;
$scope.two = 0;
$scope.three = 0;
flag1=false;
flag2=false;
flag3=false;
}
}

$scope.aa = function() {
if(flag1){
$scope.one=$scope.one+1;
}
$scope.i1 = $scope.i1 + 1;
}
$scope.dd = function() {
if(flag1){
if($scope.one > 0) {
$scope.one = $scope.one - 1;
}
}else{
if($scope.i1 > 0) {
$scope.i1 = $scope.i1 - 1;
}
}

}
$scope.bb = function() {
if(flag2){
$scope.two=$scope.two+1;
}
$scope.i2 = $scope.i2 + 1;
}
$scope.ee = function() {
if(flag2){
if($scope.two > 0) {
$scope.two = $scope.two - 1;
}
}else{
if($scope.i2 > 0) {
$scope.i2 = $scope.i2 - 1;
}
}

}
$scope.cc = function() {
if(flag3){
$scope.three=$scope.three+1
}
$scope.i3 = $scope.i3 + 1;
}
$scope.ff = function() {
if(flag3){
if($scope.three > 0) {
$scope.three = $scope.three - 1;
}
}else{
if($scope.i3 > 0) {
$scope.i3 = $scope.i3 - 1;
}
}

}
})

</script>
</body>

</html>