Angular购物车应用-优快云博客

<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app = angular.module("app",[]);
			app.controller("de",function($scope){
				$scope.datas = [
				    {
				        "gcount": 3000,
				        "gid": 1,
				        "gname": "手机",
				        "gnum": 3,
				        "gprice": 1000
				    },
				    {
				        "gcount": 6000,
				        "gid": 2,
				        "gname": "电脑",
				        "gnum": 3,
				        "gprice": 2000
				    },
				    {
				        "gcount": 3000,
				        "gid": 3,
				        "gname": "电视",
				        "gnum": 6,
				        "gprice": 500
				    }
				];
				//数量减少
				$scope.jian = function($index){
					if($scope.datas[$index].gnum<=0){
						$scope.datas[$index].gnum=0;
					}else{
						$scope.datas[$index].gnum--;
					}
					if ($scope.datas[$index].gnum<=0) {
						var f = confirm("确定删除吗?");
						if (f) {
							$scope.datas.splice($index,1);
						}
					}
				}
				//数量增加
				$scope.jia = function($index){
					$scope.datas[$index].gnum++;
				}
				//批量删除
				$scope.pldel = function($index){
					var f = confirm("确认删除吗?");
					if (f) {
						if($scope.ck){
							for (var i=$scope.datas.length-1;i>=0;i--) {
								$scope.datas.splice(i,1);
							}
							$scope.ck =!$scope.ck;
						}
					}
					for (var i=$scope.datas.length-1;i>=0;i--) {
						if($scope.datas[i].ck){
							$scope.datas.splice(i,1);											
						}
					}
				}
				//总数量
				$scope.nums = function(){
					var a = 0;
					for (var i=0;i<$scope.datas.length;i++) {
						a+=$scope.datas[i].gnum;
					}
					return a;
				}
				//总数量
				$scope.prices = function(){
					var p = 0;
					for (var i=0;i<$scope.datas.length;i++) {
						p+=$scope.datas[i].gnum * $scope.datas[i].gprice;
					}
					return p;
				}
				//清空购物车
				$scope.alldel = function($index){
					for (var i=$scope.datas.length;i>=0;i--) {
						$scope.datas.splice(i,1);
					}
				}
				//选框
				$scope.cks = function($index){
					$scope.datas[$index].ck =!$scope.datas[$index].ck;
				}
				//排序与查询
				$scope.orderkey = "gid";
				$scope.gname = "";
			});
		</script>
		<style>
			table tr:nth-child(even){
				background: #00FF99;
			}
			table tr:nth-child(odd){
				background: #FF3399;
			}
			.box{
				width:600px;
				height:30px;
				margin: 0 auto;
			}
			.a{
				width: 250px;
				height: 100px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body ng-controller="de">
		<div class="a">
			<h1>我的购物车详情</h1>
		</div>
		<div class="box">
			<input type="text" placeholder="根据名称查询" ng-model="sname" style="width: 200px;height:30px;border-radius: 10px; background: yellow;" />
			排序:
			<select ng-model="orderkey">
				<option value="">升序</option>
				<option value="-">降序</option>
			</select>
			<br />
			<table border="1" cellpadding="0" cellspacing="0" ng-model="ck">
				<tr>
					<td style="width: 100px; height: 30px; text-align: center;">商品编号</td>
					<td style="width: 100px; height: 30px; text-align: center;">商品名称</td>
					<td style="width: 100px; height: 30px; text-align: center;">商品数量</td>
					<td style="width: 100px; height: 30px; text-align: center;">商品单价</td>
					<td style="width: 100px; height: 30px; text-align: center;">价格小计</td>
					<td style="width: 100px; height: 30px; text-align: center;">操作</td>
				</tr>
				<tr ng-repeat="x in datas | filter:{gname:sname} | orderBy:orderkey">
					<td style="width: 100px; height: 30px; text-align: center;">{{x.gid}}</td>
					<td style="width: 100px; height: 30px; text-align: center;">{{x.gname}}</td>
					<td style="width: 250px; height: 30px; text-align: center;"><input type="button" value="-" ng-click="jian($index)"/><input type="number" ng-model="x.gnum"/><input type="button" value="+" ng-click="jia($index)"</td>
					<td style="width: 100px; height: 30px; text-align: center;">{{x.gprice}}</td>
					<td style="width: 100px; height: 30px; text-align: center;">{{x.gnum * x.gprice}}</td>
					<td style="width: 100px; height: 30px; text-align: center;"><input type="checkbox" ng-checked="ck" ng-click="cks($index)"/></td>
				</tr>
			</table>
			商品总数{{nums()}}<br />
			商品总价{{prices()}}<br />
			<input type="button" value="清空购物车" ng-click="alldel()" style="background: yellow; border-radius: 5px;"/>
			<input type="button" value="删除" ng-click="pldel()" style="background:red"/>
		</div>
		
		
	</body>
</html>