lianxi

最新推荐文章于 2024-04-03 20:09:48 发布

Androidoux98

最新推荐文章于 2024-04-03 20:09:48 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/Androidoux98/article/details/79458229

版权

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script type="text/javascript">
			var app=angular.module("App",[]);
			app.controller("Democtrl",function($scope){
				$scope.datas=
				[{ gid: 001, gname: "手机", gnum: 3, gprice: 1000, gcount: 3000 },
				{ gid: 002, gname: "电脑", gnum: 3, gprice: 2000, gcount: 6000 }, 
				{ gid: 003, gname: "电视", gnum: 6, gprice: 500,gcount: 3000 }];
				$scope.del=function($index){
					$scope.datas.splice($index,1);
				}
				$scope.orderkey="";
				$scope.counts=function(){
					var a=0;
					for (var i=0;i<$scope.datas.length;i++) {
						a+=$scope.datas[i].gnum;
					}
					return a;
				}
				$scope.prices=function(){
					var a=0;
					for (var i=0;i<$scope.datas.length;i++) {
						a+=$scope.datas[i].gnum*$scope.datas[i].gprice;
					}
					return a;
				}
				$scope.Alldel=function(){
					for (var i=$scope.datas.length;i>=0;i--) {
						$scope.datas.splice(i,1);
					}
				}
				$scope.chan=function($index){
					if ($scope.datas[$index].gnum<=0) {
						var f=confirm("确定要删除该产品吗？");
						if (f) {
							$scope.datas.splice($index,1);
						}
					}
				}
			})
			
		</script>
		<style type="text/css">
			tr:nth-child(odd){
				background-color: indianred;
			}
			tr:nth-child(even){
				background-color: greenyellow;
			}
			
		</style>
	</head>
	<body ng-controller="Democtrl" >
			<h1 style="text-align: center;">我的购物车详情</h1>
		<input type="text" placeholder="根据商品名称查询" ng-model="searchcommodity" style="margin-left: 725px;background-color: yellow;"/>
		<table border="1" cellspacing="0" cellpadding="1" style="margin-left: 380px;">
			<tr style="background-color: darkgrey;">
				<td >商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></td>
				<td >商品名称</td>
				<td >商品数量</td>
				<td >商品单价</td>
				<td >价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></td>
				<td >操作</td>
			</tr>
			<tr ng-repeat="x in datas | orderBy : orderkey |filter:{gname:searchcommodity}">
				<td >{{x.gid}}</td>
				<td >{{x.gname}}</td>
				<td ><input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-change="chan($index)"/></td>
				<td >{{x.gprice}}</td>
				<td >{{x.gnum*x.gprice}}</td>
				<td ><input type="button" value="移除" ng-click="del($index)"/></td></tr>
		</table>
		<div style="margin-left: 410px;">
			商品总数:{{counts()}}    商品总价:{{prices()}}
			<input type="button"  value="清空购物车" ng-click="Alldel()" style="margin-left: 100px;background-color: yellow;"/>
		</div>
	</body>
</html>