angularJs购物车--（卖药）

全栈若城

发布于 2024-02-29 18:13:26

11400

代码可运行

文章被收录于专栏：若城技术专栏

运行总次数：0

代码可运行

效果图：

css代码：

<style>
			div{
				width: 400px;
				height:300px ;
				background: #ccc;
			}
			div p{
				width: 300px;
				height: 30px;
				margin: 0 auto;
				margin-top: 20px;
			}
			div input{
				width: 200px;
				height: 30px;
			}
			div button{
				display: block;
				margin: 0 auto;
				margin-top: 20px;
				width: 100px;
				height: 30px;
			}
		</style>

html代码：

<body ng-app="myApp" ng-controller="myCtrl">
		<button ng-click="qx()">全选</button>
		<button ng-click="fx()">反选</button>
		<button ng-click="qbx()">全不选</button>
		<button ng-click="plsc()">批量删除</button>
		<button ng-click="allDel()">清空购物车</button>
		<button ng-click="add()">添加</button>
		<button ng-click="dx(price)">倒序</button>
		<input type="text" placeholder="请输入名称" ng-model="search" />
		<table border="1" width="100%" >
			<tr>
				<th>选项 </th>
				<th>名称</th>
				<th>产地</th>
				<th>数量</th>
				<th>生产时间</th>
				<th>单价</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			
			<tr ng-repeat="x in goods | filter:{gname:search} | orderBy:order+orderType">
				<td><input type="checkbox" ng-model="x.ck" /> </td>
				<td>{{x.gname}}</td>
				<td>{{x.address}}</td>
				<td>
					<input type="button" value="-" ng-click="jian($index)" />
					<span>{{x.num}}</span>
					<input type="button" value="+" ng-click="jia($index)" />
				</td>
				<td>
					{{x.regDate|date:'yyyy-MM-dd hh:mm:ss'}}
				</td>
				<td>
					{{x.price | currency :"￥"}}
				</td>
				<td>
					{{x.num * x.price | currency:"￥"}}
				</td>
				<td>
					<input type="button" value="删除" ng-click="del($index)" />
					<input type="button" value="修改" ng-click="upda($index)" />
					
				</td>
			</tr>
			<tr>
				<td colspan="8">
					<span>总价</span>
					<span ng-bind="allSum()|currency:'￥'"></span>
				</td>
			</tr>
		</table>
		<!--添加操作-->
		<div ng-show="addShow" >
			<p>名称 ： <input ng-model="name" type="text" placeholder="请输入名称"  /></p>
			<p>产地 ： <input ng-model="addre" type="text" placeholder="请输入产地"  /></p>
			<p>价格 ： <input ng-model="prices" type="text" placeholder="请输入价格"  /></p>
			<button ng-click="trueAdd()">确认添加</button>
		</div>
		
		<!--修改操作-->
		<div ng-show="updShow" >
			<p>名称 ： <input ng-model="obj.name" type="text" placeholder="请输入名称"  /></p>
			<p>产地 ： <input ng-model="obj.addre" type="text" placeholder="请输入产地"  /></p>
			<p>价格 ： <input ng-model="obj.prices" type="text" placeholder="请输入价格"  /></p>
			<button ng-click="trueUpd()">确认修改</button>
		</div>
	</body>

angular代码：

 var vm=angular.module('myApp',[])
		        vm.controller('myCtrl',function($scope,$http){
			//如果需要调用外部数据，在scope 后面加上 http 服务
				$http.get("yao.json").then(function(res){
					$scope.goods=res.data
					//修改数据
					//定义一个空对象 接受临时数据
					$scope.obj={}
					//定义一个索引值
					var idx=-1
					$scope.upda=function($index){
						$scope.updShow=true
						//将goods里面对应的数据放到obj中
						$scope.obj.name=$scope.goods[$index].gname
						$scope.obj.addre=$scope.goods[$index].address
						$scope.obj.prices=$scope.goods[$index].price
						
						idx=$index
					}
				//数据修改
					$scope.trueUpd=function(){
						
						$scope.goods[idx].gname=$scope.obj.name
						$scope.goods[idx].address=$scope.obj.addre
						$scope.goods[idx].price=$scope.obj.prices
						$scope.updShow=false
						
						
						
					}
			
			
				//添加
				$scope.add=function(){
					$scope.addShow=true
					
				}
				
				//定义当前时间
//				var theTime=new Date().toLocaleTimeString()
				
				//确认添加逻辑实现
				$scope.trueAdd=function(){
					//赋值操作
					 var name= $scope.name  
					 var addre= $scope.addre  
					 var prices= $scope.prices 
					 
					//添加操作
					$scope.goods.push({
						gname:name,
						address:addre,
						price:prices,
						num:1,
						regDate:1371120093221
						
					})
					
					//数据清空
					$scope.name=""
					$scope.addre  =""
					$scope.prices =""
					
					$scope.addShow=false
					
				}
				
				//总价
				$scope.allSum=function(){
					var allProce=0
					
					for (var i=0 ;i<$scope.goods.length;i++) {
						allProce+=$scope.goods[i].price * $scope.goods[i].num
						
					}
					return allProce
					
				}
				
				//倒序
				$scope.order=""
				$scope.dx=function(type){
					$scope.orderType=type
					if ($scope.order=="") {
						$scope.order="-"
					} else{
						$scope.order=""
					}
				}
				
				
				//数据加减 
				//加
				$scope.jia=function(index){
					$scope.goods[index].num++
					
				}
				//减
				$scope.jian=function(index){
					
					if ($scope.goods[index].num>1) {
						$scope.goods[index].num--
					} else{
						$scope.goods.splice(index,1)
					}
					
				}
				
					//清空购物车
					$scope.allDel=function(){
						
							if ($scope.goods.length==0) {
							alert("购物车为空")
						} else{
							$scope.goods=[]
						}
					
						
					}
					
					//批量删除
					$scope.plsc=function(){
						if (confirm("确定要删除吗？？")) {
							
						
						for (var i=0 ; i<$scope.goods.length ; i++) {
							if ($scope.goods[i].ck==true) {
								$scope.goods.splice(i,1)
								i--
							}  
							
						}
						}
					}
					
					
					//单个删除
					
					$scope.del=function(index){
						
						$scope.goods.splice(index,1)
					}
					
					
					//全选
					
					$scope.qx=function(){
						for (var i=0 ; i<$scope.goods.length ;i++) {
							var x=$scope.goods[i]
								x.ck=true							
							
						}
						
						
					}
					
					//反选
					
					$scope.fx=function(){
						for (var i=0 ; i<$scope.goods.length ;i++) {
							var x=$scope.goods[i]
								if (x.ck==x.ck) {
									x.ck=!x.ck	
								}						
							
						}
						
						
					}
					
					//全不选
					$scope.qbx=function(){
						for (var i=0 ; i<$scope.goods.length ;i++) {
							var x=$scope.goods[i]
								if (x.ck==x.ck) {
									x.ck=false
								}						
							
						}
						
						
					}
					
					
				})
			
		        })

ok！！！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

数据