AngularJs实现商品购物车综合案例完整

最新推荐文章于 2026-05-09 07:20:21 发布

原创最新推荐文章于 2026-05-09 07:20:21 发布 · 置顶 · 1.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #angularjs #购物车

该博客详细介绍了如何利用AngularJS实现一个完整的商品购物车功能。从导入必要的AngularJS和jQuery库开始，接着准备数据源，搭建购物车界面，然后实现商品数量增减和价格变动的实时更新，确保总价和小计的联动效果。最后，博主进行了简单的总结。

概述

主要功能就是结合 Html5+AngularJs+Jquery 实现简易的商品增删改查，以及模糊查询，排序，批量删除等功能

预览效果

入库

模糊查询

先把需要依赖的jar包导入(Angularjs包以及jquery包)

<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>

其次准备数据源

数据源的获取有两种一种是通过angular提供的网络服务来获取网络数据，另一种是通过本地获取数据

第一种是通过angular提供的网络服务，是$http 它的使用方法很简单，如下

   <script type="text/javascript">
			var app = angular.module("test", []); //定义一个module 即为模块，angular的初始化应用程序

			app.controller("mycontroller", function($scope, $http) {  //绑定控制器，注入$http 网络服务

				$scope.jsonFromNet = "";  //定义一个空变量用来接受数据
				$http({
					method: "get",  //请求方式
					url: "http://gank.io/api/data/Android/10/1"  //请求地址


				}).then(function success(response) {     //返回成功或者失败
					$scope.jsonFromNet = response.data;
				}).then(function error(response) {

				});

</script>
定义好在表格中使用只需要遍历数据即可（代码片段部分）

<tr ng-repeat="g in jsonFromNet.results | orderBy:orderByKey | filter:{desc:search}"> //遍历，变量后面是返回的json数据对象
  					<td>{{$index}}</td>
					<td>{{g.type}}</td>
					<td>{{g.source}}</td>
					<td>{{g.desc}}</td>
					<td>{{g.publishedAt | date:"MM-dd HH:mm"}}</td>  //实现对日期的过滤
					<td>{{g.who}}</td>
					<td>
			<input type="button" ng-click="deleteAll($index)" value="删除" class="btn btn-danger" />
		      <input type="button" ng-click="updateAll($index)" value="修改" class="btn btn-success" />
					</td>
				</tr>

另一种是通过本地获取数据（本文采用的就是本地数据）

//准备初始数据

//准备初始数据
				var date1 = new Date("2017-9-01 10:10:10");
				var date2 = new Date("2017-1-02 10:10:10");
				var date3 = new Date("2017-1-03 10:10:10");
				$scope.goods = [{
					name:"云南白药",
					num:100,
					address:"云南",
					price:19.911,
					date:date1,
					flag:true,
					ck:false
				},{
					name:"999感冒灵",
					num:30,
					address:"北京",
					price:12.511,
					date:date2,
					flag:true,
					ck:false
				},{
					name:"感康云",
					num:20,
					address:"河北",
					price:16.611,
					date:date3,
					flag:true,
					ck:false
				}];

基本界面搭建主体部分

实现点击增加数量，修改价格，来改变小计以及最后的总价，产生联动的效果

<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h3>汇明药店商品信息</h3>
         <input type="text" ng-model="search" style="border: 2px solid red;" placeholder="请输入搜索关键字"/>
	<input type="text" ng-model="search1" style="border: 2px solid red;" placeholder="请输入搜索关键字"/>
			<select ng-model="orderByKey">
				<option value="">--请选择--</option>
				<option value="num">数量升序</option>
				<option value="-num">数量降序</option>
				<option value="price">价格升序</option>
				<option value="-price">价格降序</option>
			</select>
			<input type="button" value="入库" ng-click="ifAdd();"/><br /><br />
			<input type="button" value="批量删除" ng-click="deleteMore();" /><br />
			<table ng-show="showTitle" >
				<tr  style="background-color: #006400;">
					<th width="80"><input type="checkbox"  ng-model="uu"/></th>
					<th width="80">序号</th><th width="80">名字</th>
					<th width="120" ng-click="orderByKey='num'">数量</th><th width="80">地址</th>
					<th width="80" ng-click="orderByKey='price'">价格</th><th >日期</th><th width="80">小计</th><th >操作</th></tr>
				<tr align="center" ng-repeat="g in goods | orderBy:orderByKey | filter:{name:search,address:search1}">
					<td><input type="checkbox" ng-checked="uu" ng-model="g.ck" name='g.name'/></td>
					<td>{{$index}}</td>
					<td>{{g.name}}</td>
					<td><input type="button"value="-" ng-click="g.num=g.num-1;getAllPrice();"/>  
						{{g.num}}  
						<input type="button"value="+" ng-click="g.num=g.num+1;getAllPrice();"/>  
					</td>
					<td>{{g.address}}</td>
					<!--
                    	价钱列
                    -->
					<td ng-dblclick="g.flag=false"><span ng-show="g.flag">{{g.price}}</span>
												   <input ng-hide="g.flag" ng-model="g.price" ng-change="getAllPrice();" ng-blur="g.flag=true;" type="text" /></td>
					
					<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td>{{g.price*g.num | number:2}}</td>
					<td>
						<input type="button"value="删除" ng-click="deleteGood($index);"/>
						<input type="button" value="修改" ng-click="updateGood($index);"/>
					</td>
				</tr>
				<!--<tr><td colspan="8">{{goods}}</td></tr>--->
			</table><br />
			总价：<span>{{allPrice | number:2}}</span>
			<div ng-show="ifFlag">
				名字：<input type="text" placeholder="输入名字" ng-model="newname" /><br />
				数量：<input type="text" placeholder="输入数量" ng-model="newnum"/><br />
				地址：<input type="text" placeholder="输入地址" ng-model="newaddress"/><br />
				价格：<input type="text" placeholder="输入价格" ng-model="newprice"/><br /><br />
				<input type="button" id="btn1" value="添加" ng-click="addGood();"/>
				
			</div>
			
			
		</center>
	</body>

js部分

//搜索条件
				$scope.search="";
				$scope.search1="";
				$scope.orderByKey = "";
				
				//入库相关
				$scope.ifFlag = false;
				//点击 入库 是否显示下方的输入区域
				$scope.ifAdd = function(){
					$scope.ifFlag = !$scope.ifFlag;
					
				}
				//添加商品
				$scope.newname="";
				$scope.newnum="";
				$scope.newaddress="";
				$scope.newprice="";
				
				$scope.updateIndex = 0;
				$scope.addGood = function(){
					if($("#btn1").val() == "添加"){
						//创建good对象
						var good = {
							name:$scope.newname,
							num:$scope.newnum,
							address:$scope.newaddress,
							price:parseFloat($scope.newprice),
							date:new Date(),
							flag:true
						};
						if($scope.goods.length == 0){//此次添加，如果table没有出现，先显示
							$scope.showTitle = true;
						}
						$scope.goods.unshift(good);
						$scope.ifFlag = false;//添加完后，自动隐藏输入区域
					}else{
						$scope.goods[$scope.updateIndex ].name = $scope.newname;
						$scope.goods[$scope.updateIndex ].num = $scope.newnum;
						$scope.goods[$scope.updateIndex ].address = $scope.newaddress;
						$scope.goods[$scope.updateIndex ].price = $scope.newprice;
						
					}
				}
				
				$scope.showTitle = true;
					//删除商品
			     $scope.deleteGood = function($index){
				if(confirm("确认删除吗?")){
						$scope.goods.splice($index,1);//在goods数组中删除此商品
						//从新获得总价
						$scope.getAllPrice();//调用计算总价的函数
						
						if($scope.goods.length == 0){
							$scope.showTitle = false;
						}
					}else{
						alert("您取消了删除!");
					}
					
				}
				//修改
				$scope.updateGood = function($index){
					$scope.updateIndex = $index;
					//显示修改区域
					$scope.ifFlag = true;
					$("#btn1").val("修改");
					
					$scope.newname=$scope.goods[$index].name;
					$scope.newnum=$scope.goods[$index].num;
					$scope.newaddress=$scope.goods[$index].address;
					$scope.newprice=$scope.goods[$index].price;
				}
				
				//总计
				$scope.allPrice = 0;
				$scope.getAllPrice = function(){
					var count = 0;
					for(index in $scope.goods){//遍历goods，得到索引
						count += $scope.goods[index].price*$scope.goods[index].num;
					}
					$scope.allPrice = count;
				}
				$scope.getAllPrice();//调用计算总价的函数
				
				//减号
				$scope.jian1 = function($index){
					$scope.goods[$index].num = $scope.goods[$index].num-1;
					$scope.getAllPrice();//调用计算总价的函数
				}
				
				$scope.ckchange = function(){
					var ss = $scope.goods;
					debugger;
				}
				
				$scope.deleteMore = function(){
					debugger;
					for(var i=$scope.goods.length-1;i>=0;i--){
						var _ck = $scope.goods[i];
						if(_ck.ck){
							$scope.goods.splice(i,1);
						}
					}
				}
			});
		</script>

小结

anularjs 提供了很好的数据双向绑定，在实际的操作过程中只需要关注数据本身就可以，比如修改单价，紧接着angular会自动更新小计和总价实现联动的效果，这一点是其他前端框架所不能及的，希望这个案例对你们有帮助，谢谢！