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

概述

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

预览效果

入库

模糊查询

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

其次准备数据源  

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

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

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

 //遍历，变量后面是返回的json数据对象
  					{{$index}}
					{{g.type}}
					{{g.source}}
					{{g.desc}}
					{{g.publishedAt | date:"MM-dd HH:mm"}}  //实现对日期的过滤
					{{g.who}}
					
			
		      
					
				

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

//准备初始数据

   

//准备初始数据
				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
				}];

基本界面搭建 主体部分

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

		
			
汇明药店商品信息
         
	
			
				--请选择--
				数量升序
				数量降序
				价格升序
				价格降序
			
			


			

			

				

					

					
序号
名字
					
数量
地址
					
价格
日期
小计
操作
				

					

					
{{$index}}
					
{{g.name}}
					
  
						{{g.num}}  
						  
					
					
{{g.address}}
					
					
{{g.price}}
												   
					
					
{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}
					
{{g.price*g.num | number:2}}
					

						
						
					
				
				
			

			总价：{{allPrice | number:2}}
			

				名字：

				数量：

				地址：

				价格：


				
				
			
			
			
		
	

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);
						}
					}
				}
			});
		

小结

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