HBuilder中的遍历添加数据+全选+删除+批量删除+更改+排序

最新推荐文章于 2024-03-13 15:28:30 发布

原创最新推荐文章于 2024-03-13 15:28:30 发布 · 5.9k 阅读

2 ·

CC 4.0 BY-SA版权

基础专栏收录该内容

50 篇文章

订阅专栏

这是一个使用AngularJS编写的模拟购物车管理应用。它实现了遍历数据、全选/反选商品、删除单个商品、批量删除、价格更改以及按ID和价格排序的功能。用户可以输入产品名称进行筛选，通过下拉菜单设置价格范围和排序方式。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟</title>
		<script type="text/javascript" src="../kuwenjian/angular.js" ></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("mycon",function($scope){
				$scope.mohu="";
				$scope.pxfs="";
				$scope.qxz="--请选择--";
				$scope.orderFlag="";
				$scope.orderLine="";
				$scope.xinshuzu=[];
				
				//点击删除执行的方法
				$scope.dleone=function(bian){				
					for(var i=0;i<$scope.data.length;i++){
						if($scope.data[i].bianhao==bian){
							$scope.data.splice(i,1);
						}
					}
				}
				
				//点击更改执行的方法
				$scope.updeteprice=function(price){				
					for(var i=0;i<$scope.data.length;i++){
						if($scope.data[i].jiage==price){
							var updprice = parseInt(window.prompt("请输入要修改的价格",price));
							if(updprice < 0) {
								alert("输入有误，请重新更改");
							} else {
								if(window.confirm("确定要将" + $scope.data[i].mingcheng + "的价格更改为：" + updprice + "吗？")) {
									$scope.data[i].jiage = updprice;
								}
							}
						}
					}
				}
				
				$scope.aaa=function(nan){				
					$scope.pxfs = nan;
					if($scope.orderFlag == ""){
						$scope.orderFlag = "-";
					}else{
						$scope.orderFlag = "";
					}
				}
				
				//全选按钮的判断
				$scope.seleall="";
				$scope.selectAllFun = function() {
					if($scope.seleall) {
						for(index in $scope.data) {
							$scope.data[index].state = true;
						}
					} else {
						for(index in $scope.data) {
							$scope.data[index].state = false;
						}
					}
				}
				
//				//反选  
//				$scope.checkSelecetAll = function() {
//					var flag = false;
//					//遍历数组，获得对象的状态
//					for(index in $scope.data) {
//						//alert($scope.products[index].state);
//						//如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
//						if(!$scope.data[index].state){
//							flag = true;
//						}
//					}
//					//判断是否没有一个是未选中状态
//					if(flag){//这是正面至少有一个未选中
//						$scope.seleall = false;//全选状态为false
//					}else{//一定是全部被选中
//						$scope.seleall = true;//全选状态为true
//					}
//				}

				$scope.plsc=function(){
					for(inde in $scope.data){
						if($scope.data[inde].state){
							$scope.xinshuzu.push($scope.data[inde]);
						}
					}
					
					for(xin in $scope.xinshuzu){
						var ff = $scope.xinshuzu[xin].bianhao;
						for(inde in $scope.data){
						var ssc = $scope.data[inde].bianhao;
						if(ssc==ff){
							$scope.data.splice(inde,1)
						}
					}
					}
					
				}
				
				
				//全选按钮的判断
				$scope.seletwo = function() {
					var flag =true;
						for(index in $scope.data) {
							if($scope.data[index].state==false){
								flag=false;
							}
						}
					
					if(flag){
							$scope.seleall=true;
						}else{
							$scope.seleall=false;
						}
					}
					
				
				
				
				$scope.data=[{
					bianhao:80,
					mingcheng:"iphone",
					jiage:5400,
					state: false
				},{
					bianhao:290,
					mingcheng:"ipad",
					jiage:1420,
					state: false
				},{
					bianhao:500,
					mingcheng:"ipad air",
					jiage:2340,
					state: false
				},{
					bianhao:910,
					mingcheng:"imac",
					jiage:15400,
					state: false
				},{
					bianhao:1200,
					mingcheng:"ipad mini",
					jiage:2200,
					state: false
				}];
				
				$scope.ifShow = function(price){
					if($scope.qxz == "--请选择--"){
				
						return true;
					}else{
						var arr = $scope.qxz.split("-");
						var priceMin = arr[0];
						var priceMax = arr[1];
					
						if(price<priceMin || price>priceMax){
							//alert("111");
							return false;
						}else{
							return true;
						}
					}
				}
				
				
			});
		</script>
	</head>
	<body ng-app="myapp" ng-controller="mycon">
		<center>
			<h2>购物车</h2>
			<input type="text" placeholder="产品名称" ng-model="mohu" />
			产品价格 <select ng-model="qxz">
				<option>--请选择--</option>
				<option>0-2000</option>
				<option>2001-3000</option>
				<option>4001-5000</option>
				<option>5001-6000</option>
				<option>6001-7000</option>
			</select>
			
			<select ng-model="pxfs">
				<option value="">排序方式 </option>
				<option value="bianhao">id正序</option>
				<option value="-bianhao">id逆序</option>
				<option value="jiage">价格正序</option>
				<option value="-jiage">价格逆序</option>
			</select>
			
			<button ng-click="plsc()">批量删除</button>
			
			<table style="border: 1px solid black; width: auto;" border="1px" cellpadding="10" cellspacing="1">
				<tr>
					<td><input type="checkbox" ng-model="seleall" ng-click="selectAllFun()"/></td>
					<td ng-click="aaa('bianhao')">产品编号</td>
					<td ng-click="aaa('mingcheng')">产品名称</td>
					<td ng-click="aaa('jiage')">产品价格</td>
					<td>操作</td>
				</tr>
				<tr ng-repeat="inde in data | filter:mohu |orderBy:(orderFlag+pxfs)" ng-if="ifShow(inde.jiage)">
					<td><input type="checkbox" ng-model="inde.state" ng-click="seletwo()"/></td>
					<td>{{inde.bianhao}}</td>
					<td>{{inde.mingcheng}}</td>
					<td>{{inde.jiage}}</td>
					<td><button ng-click="dleone(inde.bianhao)">删除</button> <button ng-click="updeteprice(inde.jiage)">修改</button></td>
				</tr>
			</table>
			
		</center>
	</body>
</html>