小购物车 (趣艺工坊)

xujiuba

于 2018-01-17 11:21:10 发布

阅读量299

点赞数

分类专栏：混合开发

本文链接：https://blog.csdn.net/xujiuba/article/details/79083215

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日考19</title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("mycon",function($scope){
				//设置总和
				$scope.sum = 0;
				var shu = 0;
				//设置数据
				$scope.good = [{
					"name":"纯手工制作木质时钟精致家具装饰摆件",
					"price":"150.00",
					"count":shu,
					"flas":false
				},{
					"name":"木质蓝牙音箱包邮实木家具装饰摆件",
					"price":"150.00",
					"count":shu,
					"flas":false
				},{
					"name":"装饰木雕,独特趣味设计家具装饰摆件",
					"price":"150.00",
					"count":shu,
					"flas":false
				}];
				//减的点击事件
				$scope.jianjian = function($index){
					var cc=$scope.good[$index].count;
					if(cc == 0){
						alert("没有的");
						return;
					}
					//设置变量接受方便的值
	                var cc1 = cc - 1;
	                //赋回去
	                $scope.good[$index].count = cc1;
				};
				//加的点击事件
	            $scope.jiajia = function($index) {
	                //获取数量
	                var cc = $scope.good[$index].count;
	                //设置变量接受方便的值
	                var cc1 = cc + 1;
	                //赋回去
	                $scope.good[$index].count = cc1;
	
	            };
	             //删除
	            $scope.dele = function($index) {
	
	                //取出删除的对象
	                var aa = $scope.good.splice($index, 1);
	
	                //用总和减去删掉的价格
	                $scope.sum = $scope.sum - aa[$index].price * aa[$index].count;
	
	            };
	             //单选
	            $scope.ss = function($index) {
	                //获取flas 初始值是false
	                if($scope.good[$index].flas == false) {
	                    //scope.good[$index].flas赋为true
	                    $scope.good[$index].flas = true;
	                    //  取出数量+价格 赋给总合
	                    $scope.sum = $scope.sum + $scope.good[$index].count * $scope.good[$index].price;
	                } else {
	                    //没单选，综合归0
	                    $scope.sum = 0;
	                    //scope.good[$index].false
	                    $scope.good[$index].flas = false;
	
	                }
	            };
	            //全选
	            $scope.quxuan = function() {
	                //获取全选的MODLE值
	                var tt = $scope.flas2;
	                //赋给单选框
	                $scope.flas = tt;
	                //是true 
	                if($scope.flas) {
	                    //综合归0
	                    $scope.sum = 0;
	                    //便利
	                    for(var i = 0; i < $scope.good.length; i++) {
	                        //  取出数量+价格 
	                        var shu = $scope.good[i].count;
	                        var prices = $scope.good[i].price;
	                        //赋给总合
	                        $scope.sum = $scope.sum + shu * prices;
	
	                    }
	                } else {
	                    //没全选，综合归0
	                    $scope.sum = 0;
	
	                }
	                 //全选之后的删除
	                $scope.dele = function($index) {
	
	                    //取出删除的对象
	                    var aa = $scope.good.splice($index, 1);
	
	                    //用总和减去删掉的价格
	                    $scope.sum = $scope.sum - aa[$index].price * aa[$index].count;
	
	                }
	            }
			})
		</script>
	</head>
	<body ng-app="myapp" ng-controller="mycon">
		<h3>购物车</h3>
			<hr style="width: 400px; " align="left" />
			<input type="checkbox" id="tabbox" />趣艺工坊
			<hr style="width: 400px; " align="left" />
			<div>
				<table ng-repeat="g in good">
					<tr>
						<td><input type="checkbox"  ng-checked="flas2" ng-click="ss($index)" ng-model="ff" /></td>
						<td>
							<img src="img/b.png"/>
						</td>
						<td>
							<h6>{{g.name}}</h6>
							<h6>{{g.price | currency:"￥"}}</h6>
							<input type="button" value="-" ng-click="jianjian($index)" /> {{g.count}}
	                        <input type="button" value="+" ng-click="jiajia($index)" />
	                        <a href="#" ng-click="dele($index)">删除</a>
						</td>
					</tr>
				</table>
			</div>
			<hr style="width: 400px; " align="left" />
			<input type="checkbox" ng-click="quxuan()" ng-model="flas2" />全选 合计:
	        <span ng-model="sum">{{sum|currency:"￥"}}</span>
	        <input type="button" value="结算" />
	</body>
</html>