Angular Js如何实现购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<script type="text/javascript">
		var app=angular.module("myapp",[]).controller("myctrl",function ($scope,$http) {
			$http.get("goods.json").then(function (success) {
				$scope.goods=success.data;
			});
			$scope.flag=true;
			$scope.nums=function () {
				var nums=0;
				for (var i = 0; i < $scope.goods.length; i++) {
					nums+=$scope.goods[i].gnum;
				}
				return nums;
			}
			$scope.yc=function (i) {
				if(confirm("您确定要移除该数据吗？"))
				{
					$scope.goods.splice(i,1);
					alert("移除成功！");
				}
			}
			$scope.totals=function () {
				var totals=0;
				for (var i = 0; i < $scope.goods.length; i++) {
					
					totals+=$scope.goods[i].gnum*$scope.goods[i].gprice;
				}
				return totals;
			}
			$scope.remove=function () {
				$scope.goods=[];
				$scope.flag=false;
			}
			
			$scope.t=function (i) {
				if($scope.goods[i].gnum<1){
					if(confirm("您确定要移除该数据吗？"))
					{
						$scope.goods.splice(i,1);
						alert("移除成功！");
					}else{
						$scope.goods[i].gnum=1;
					}
				}
			}
		});
	</script>
	<body ng-app="myapp" ng-controller="myctrl">
		<input type="text" placeholder="根据名称查询" ng-model="gname" ng-show="flag"/>
		<table border="1" cellspacing="0" cellpadding="0" width="70%" ng-show="flag">
			<tr>
				<td>商品编号<button ng-click="px='gid';aa=!aa">▲</button></td>
				<td>商品名称</td>
				<td>商品数量</td>
				<td>商品单价</td>
				<td>价格小计<button ng-click="px='gprice*gnum';aa=!aa">▲</button></td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="g in goods|filter:gname|orderBy:px:aa">
				<td>{{g.gid}}</td>
				<td>{{g.gname}}</td>
				<td><input type="number" ng-model="g.gnum" ng-change="t($index)"/></td>
				<td>{{g.gprice}}</td>
				<td>{{g.gnum*g.gprice}}</td>
				<td><button ng-click="yc($index)">移除</button></td>
			</tr>
		</table>
		<span ng-show="flag">商品总数：{{nums()}}</span>
		<span ng-show="flag">商品总价：{{totals()}}</span>
		<button ng-click="remove()" ng-show="flag">清空购物车</button>
	</body>
</html>
Angular Js如何实现购物车

猜你喜欢
