Angular Js如何实现购物车_angular js 购物车-优快云博客

本文链接：https://blog.youkuaiyun.com/W2597645565/article/details/79812391

本文介绍了一个使用Angular开发的购物车应用程序。该应用实现了从JSON文件加载商品数据，并提供了商品筛选、排序、数量修改、移除商品及清空购物车等功能。通过实际案例展示了Angular框架在前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>