HTML5

最新推荐文章于 2023-08-03 00:03:56 发布
莹俊
最新推荐文章于 2023-08-03 00:03:56 发布
阅读量104
点赞数
分类专栏：删除添加排序查找全！文章标签： HTML5
本文链接：https://blog.csdn.net/weixin_43508288/article/details/83348857
版权
删除添加排序查找全！专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<style>
		.odiv {
			width: 400px;
			height: 300px;
			background: #e5e5e5;
			border: 1px solid #ccc;
			margin: 0 auto;
		}
		
		.odiv p {
			margin: 0 auto;
			width: 200px;
			height: 30px;
			margin-top: 30px;
		}
		
		.odiv input {
			width: 200px;
			height: 30px;
			margin: 0 auto;
		}
		
		.odiv button {
			width: 200px;
			height: 30px;
			display: block;
			margin: 0 auto;
			margin-top: 30px;
		}
	</style>

	<body ng-app="myApp" ng-controller="myCtrl">
		<button ng-click="qx()">全选</button>
		<button ng-click="qbx()">全不选</button>
		<button ng-click="fx()">反选</button>
		<button ng-click="clear()">清空购物车</button>
		<button ng-click="pi()">批量删除</button>
		<button ng-click="add()">添加</button>
		<button ng-click="dx(type)">倒序</button>
		<select ng-model="sss">
			<option value="">--请选择--</option>
			<option value="name">按名字正序</option>
			<option value="-name">按名字倒序</option>

	</select>
   <input type="text" placeholder="请按照名字查找" ng-model="search" />

		<!--<select>
			<option ng-model="q">名字查找</option>
			<option ng-model="a">数量</option>
			
		</select>-->
		<table border="1" width="100%">

			<tr align="center">
				<td>全选 </td>
				<td>水果名字</td>
				<td>价钱</td>
				<td>数量</td>
				<td>总价</td>
				<td>操作</td>
			</tr>

	<tr ng-repeat="i in shuiguo|filter:{name:search}| 
	      orderBy:order+orderType |orderBy:sss" align="center">
	      
				<td><input type="checkbox" ng-model="i.ck" /></td>
				<td>{{i.name}}</td>
				<td>{{i.price | currency:'￥'}}</td>
				<td>
			<input type="button" value="-" ng-click="jian($index)" />
					
					<input type="text" disabled="disabled"
					 value="{{i.number}}" style="text-align: center;" />
					<!--<input type="number" ng-model="i.number" />-->
				<input type="button" value="+" ng-click="jia($index)" />
				</td>
			<td>{{i.price * i.number | currency:"￥"}}</td>
		<td><input type="button" value="删除" ng-click="del($index)" />
		<input type="button" value="修改" ng-click="xiugai($index)" />
				</td>

			</tr>
			<tr>
				<td colspan="6">总价：{{sum() |currency:"￥"}}</td>

			</tr>

		</table>
		<!--添加模板-->
	<div class="odiv" ng-show="add_show">
	<p><input ng-model="names" type="text" placeholder="请输入名称" /></p>
	<p><input ng-model="prices" type="number" placeholder="请输入价格" /></p>
<p><input ng-model="numbers" type="number" placeholder="请输入数量" /></p>
			<button ng-click="true_add()"> 确认添加</button>
		</div>
		<!-- 修改模板-->
		<div class="odiv" ng-show="xiu_show">
	<p><input ng-model="prob.name" type="text" placeholder="请输入名称" /></p>
	<p><input ng-model="prob.price" type="text" placeholder="请输入价格" /></p>
	<p><input ng-model="prob.number" type="text" placeholder="请输入数量" /></p>
	<button ng-click="true_add()"> 确认修改</button>
		</div>

	</body>
	<script type="text/javascript" src="js/angular1.4.6.js"></script>
	<script>
		var vm = angular.module('myApp', [])
		vm.controller('myCtrl', function($scope, $http) {
			$http.get("cars.json").then(function(res) {
			//获取数据   ,  在json中 如果 中括号前有信息 就放在data 后面 
			，如果没有 就不用放了
				$scope.shuiguo = res.data
				
				
				
				//全选：
			
			       $scope.qx = function() {
			           for(var i = 0; i < $scope.shuiguo.length; i++) {
			              var ck = $scope.shuiguo[i]
			               ck.ck = true
			              }
			        }
			  
			//全不选

			$scope.qbx = function() {

				for(var i = 0; i < $scope.shuiguo.length; i++) {
					var ck = $scope.shuiguo[i]
					ck.ck = false

				}

			}

			//反选

			$scope.fx = function() {
				for(var i = 0; i < $scope.shuiguo.length; i++) {
					var ck = $scope.shuiguo[i]
					ck.ck = !ck.ck

				}

			}

			//清空购物车
			$scope.clear = function() {
				$scope.shuiguo = []
				alert("已清空")
			}
			//批量删除1
			//			$scope.pi=function(){
			//				var x=false
			//		for (var i=$scope.shuiguo.length-1 ;i>=0 ;i--) {
			//			var j=$scope.shuiguo[i]
			//					if (j.ck) {
			//			$scope.shuiguo.splice(i,1)
			//							x=true
			//								}
			//								
			//								
			//							}
			//					if(x==false){
			//					alert("请选中一个，再删除")
			//								}
			//							
			//							
			//						}
			//批量删除2
		  
		          $scope.pi = function() {
		                alert('你确定要删除吗')
		             for(var i = 0; i < $scope.shuiguo.length; i++) {
		                    if($scope.shuiguo[i].ck == true) {
		                          $scope.shuiguo.splice(i, 1)
		                          i--;                    
		                      }
		                  }
		                  alert('删除成功')
		              }
		    

			//倒序

			$scope.order = ''
			$scope.dx = function(type) {
				$scope.orderType = type
				if($scope.order == "") {
					$scope.order = "-"
				} else {
					$scope.order = ""

				}

			}

			// 删除
			//			$scope.del=function(name){
			//		for (var i=0 ;i<$scope.shuiguo.length ;i++) {
			//			var j=$scope.shuiguo[i]
			//				if (j.name==name) {
			//					$scope.shuiguo.splice(i,1)
			//					} 
			//					
			//				}
			//				
			//			}
			//删除2

			$scope.del = function(index) {
				$scope.shuiguo.splice(index, 1)

			}

			// 数量加减

			//减
			$scope.jian = function(index) {
				if($scope.shuiguo[index].number > 1) {
					$scope.shuiguo[index].number--
				} else {
					alert("不能在减了")
				}

			}
			//加
			$scope.jia = function(index) {
				$scope.shuiguo[index].number++
			}

			//						
			//						    总价格计算1

			//		$scope.sum=function(){
			//			var ss=0
			//			for (var i=0 ;i<$scope.shuiguo.length;i++) {
			//				var sum=$scope.shuiguo[i]
			//				var s=sum.price * sum.number 
			//				ss+=s
			//				
			//			}
			//			return ss
			//			
			//
			//		}

			//总价格计算2

			$scope.sum = function() {

				var allPrice = 0
				for(var i = 0; i < $scope.shuiguo.length; i++) {

	    	allPrice += $scope.shuiguo[i].price * $scope.shuiguo[i].number
				}

				return allPrice
			}

			// 点击添加
			$scope.add = function() {
				$scope.add_show = true

			}

			$scope.true_add = function() {
				var name2 = $scope.names
				var price2 = $scope.prices
				var number2 = $scope.numbers

				//					var shuiguo={
				//						name:name2,
				//						price:price2,
				//						number:number2
				//					}
				//					
				//					$scope.shuiguo.push(shuiguo)

				$scope.shuiguo.push({
					name: name2,
					price: price2,
					number: number2
				})

				$scope.names = ''
				$scope.prices = ''
				$scope.numbers = ''

				$scope.add_show = false

			}

			// 点击修改
			// 定义一个空对象
			$scope.prob = {}
			//定义一个索引
			var idx = -1
			// 点击修改按钮执行效果
			$scope.xiugai = function($index) {
				$scope.xiu_show = true

				$scope.prob.name = $scope.shuiguo[$index].name
				$scope.prob.price = $scope.shuiguo[$index].price
				$scope.prob.number = $scope.shuiguo[$index].number
				
				
				idx=$index

			}
			
			$scope.true_add=function(){
				
				$scope.shuiguo[idx].name=$scope.prob.name
				$scope.shuiguo[idx].price=$scope.prob.price
				$scope.shuiguo[idx].number=$scope.prob.number
				
				$scope.xiu_show=false
			
				
			}
			
				
				
				
			})

			

		})
	</script>

</html>


在这里插入代码片