如何实现增删改查三

最新推荐文章于 2023-10-13 18:16:50 发布

不大二叔叔

最新推荐文章于 2023-10-13 18:16:50 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/qq_41946491/article/details/79812848

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			tr:nth-child(even){
				background-color: green;
			}
			tr:nth-child(odd){
				background-color: fuchsia;
			}
			
			
		</style>
		<script type="text/javascript">
			
			var app=angular.module("myApp",[]);
			
			app.controller("myCtr",function ($scope,$http) {
				
				$http.get("moni2.json").then(function (success) {
					$scope.info=success.data;
				})
				
				$scope.getNum=function () {
					var num=0;
					for (var i = 0; i < $scope.info.length; i++) {
						num+=$scope.info[i].gnum;
					}
					return num;
				}
				
				$scope.getPrice=function () {
					var total=0;
					for (var i = 0; i < $scope.info.length; i++) {
						total+=$scope.info[i].gprice*$scope.info[i].gnum;
					}
					return total;
				}
				
				/*根据number框来判断是否删除*/
				$scope.jian=function (index) {
					if ($scope.info[index].gnum<1) {
						if (confirm("是否删除")) {
							$scope.info.splice(index,1);
						}
					}
					
				}
				
				/*删除*/
				$scope.del=function (index) {
					if (confirm("是否删除？")) {
						$scope.info.splice(index,1);
						alert("删除成功");
					}
				}
				
				/*清除购物*/
				$scope.qk=function () {
					$scope.info.length=0;
				}
				
				
				
				
				
			})
			
			
			
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtr" style="width: 800px;">
		<h1 style="background-color: yellow;">我的购物车详情</h1>
		<input type="text" placeholder="根据名称查询" style="float: right;background-color: yellow;" ng-model="str1" />
		<table border="1" cellspacing="0" cellpadding="0" width="100%">
			<tr style="background-color: gray;">
				<td>商品编号<button ng-click="px='gid'">△</button></td>
				<td>商品名称</td>
				<td>商品数量</td>
				<td>商品单价</td>
				<td>价格小计<button ng-click="px='-(gprice*gnum)'">▽</button></td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="s in info|orderBy:px|filter:{'gname':str1}">
				<td>{{s.gid}}</td>
				<td>{{s.gname}}</td>
				<td>
					<!--记得number框里的值用ng-model="s.gnum"来绑定-->
					<input type="number" ng-model="s.gnum" min="0" ng-click="jian($index)" />
				</td>
				<td>{{s.gprice}}</td>
				<td>{{s.gcount}}</td>
				<td><button style="background-color: yellow;" ng-click="del($index)">移除</button></td>
			</tr>
		</table>
		<span>商品总数：{{getNum()}}</span>
		<span>商品总价：{{getPrice()}}</span>
		<button style="background-color:yellow ;" ng-click="qk()">清空购物车</button>
	</body>
</html>

不大二叔叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何实现增删改查三

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../js/angular.min.js" type="text/javascript" c
复制链接

扫一扫