Angular之购物车车库添加修改

最新推荐文章于 2019-06-11 20:39:21 发布
Mike_8859
最新推荐文章于 2019-06-11 20:39:21 发布
阅读量244
点赞数 1
本文链接：https://blog.csdn.net/Mike_chao/article/details/78120446
版权
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {
				$scope.car = [{
					id: 1,
					name: "兰博基尼",
					price: 4000,
					check: false
				}, {
					id: 18,
					name: "法拉利",
					price: 2800,
					check: false
				}, {
					id: 99,
					name: "迈巴赫",
					price: 6000,
					check: false
				}, {
					id: 199,
					name: "保时捷",
					price: 800,
					check: false
				}, {
					id: 990,
					name: "沃尔沃",
					price: 8800,
					check: false
				}];

				//筛选
				$scope.prc = "--请选择--";
				$scope.Show = function(price) {
					if($scope.prc == "--请选择--") {
						return true;
					} else {
						var priceAll = $scope.prc.split("-");
						var min = priceAll[0];
						var max = priceAll[1];
						if(price < min || price > max) {
							return false;
						} else {
							return true;
						}
					}
				}

				//删除
				$scope.delete = function(name) {
					if(window.confirm("确定要删除吗?")) {
						for(var i = 0; i < $scope.car.length; i++) {
							if($scope.car[i].name == name) {
								$scope.car.splice(i, 1);
							}
						}

					}

				}

				//全选,全不选
				$scope.selectAll = false;
				$scope.checkAll = function() {
					if($scope.selectAll) {
						for(var i = 0; i < $scope.car.length; i++) {
							$scope.car[i].check = true;
						}
					} else {
						for(var i = 0; i < $scope.car.length; i++) {
							$scope.car[i].check = false;
						}
					}
				}

				//反选

				//批量删除
				$scope.deleteAll = function() {

					if(window.confirm("确定要购买这几辆车?")) {
						for(var i = 0; i < $scope.car.length; i++) {
							if($scope.car[i].check == true) {
								$scope.car.splice(i, 1);
								i--;
							}

						}
					}

				}
				//添加的显示或隐藏
				$scope.isShow = false;
				$scope.Add = function() {
					if($scope.isShow) {
						$scope.isShow = false;
						//$scope.isUp = true;
					} else {
						$scope.isShow = true;
						$scope.isUp = false;
					}
				}
				//修改的显示或隐藏
				$scope.isUp = false;
				$scope.update = function() {
					if($scope.isUp) {
						$scope.isUp = false;
						$scope.isShow = true;
					} else {
						$scope.isUp = true;
						$scope.isShow = false;
					}
				}

				//添加新产品
				$scope.newId = "";
				$scope.newName = "";
				$scope.newPrice = "";
				$scope.AddCar = function() {
					if($scope.newId == null || $scope.newId == "") {
						alert("编号不能为空");
					} else if(isNaN(parseInt($scope.newId))) {
						alert("编号格式不正确");
					}

					if($scope.newPrice == null || $scope.newPrice == "") {
						alert("价格不能为空");
					} else if(isNaN(parseInt($scope.newPrice))) {
						alert("价格格式不正确");
					} else {
						var newCar = {
							id: parseInt($scope.newId),
							name: $scope.newName,
							price: parseInt($scope.newPrice),
						}

						$scope.car.push(newCar);
					}

				}

				//修改页面
				$scope.isUp = false;
				$scope.upId = "";
				$scope.upName = "";
				$scope.upPrice = "";
				$scope.update = function(c) {
					$scope.isUp = true;
					$scope.isShow = false;
					$scope.upId = c.id;
					$scope.upName = c.name;
					$scope.upPrice = c.price;
				}
				$scope.UpCar = function() {
					$scope.updateArr = [];
					if($scope.updateName == "" || $scope.updateName == null) {
						$scope.updateArr.push("产品名称为空");
					}
					if($scope.updatePrice == "" || $scope.updatePrice == null) {
						$scope.updateArr.push("产品价格为空");
					} else if(isNaN($scope.updatePrice)) {
						$scope.updateArr.push("产品价格不是整数");
					}

					//验证不满足
					if($scope.updateArr.length > 0) {
						for(index in $scope.car) {
							if(parseInt($scope.upId) == $scope.car[index].id) {
								$scope.car[index].name = $scope.upName;
								$scope.car[index].price = $scope.upPrice;
								$scope.isUp = false;
							}
						}
					}
				}
			});
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h2>我的车行</h2>
			<input type="text" placeholder="产品名称" ng-model="cx" />
			<select ng-model="selOrder">
				<option value="">--排序规则--</option>
				<option value="id">id正序</option>
				<option value="-id">id倒序</option>
				<option value="price">价格正序</option>
				<option value="-price">价格倒序</option>
			</select>
			<select ng-model="prc">
				<option>--请选择--</option>
				<option>1-1000</option>
				<option>1001-2000</option>
				<option>2001-3000</option>
				<option>3001-5000</option>
				<option>5001-8000</option>
				<option>8001-10000</option>
			</select>
			<button ng-click="deleteAll()">批量删除</button><br /><br />

			<table border="1" cellspacing="0" cellpadding="10">
				<tr>
					<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /></th>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>操作</th>

				</tr>
				<tr ng-repeat="c in car | filter:cx | orderBy:selOrder" ng-show="Show(c.price)">
					<td><input type="checkbox" ng-model="c.check" /></td>
					<td>{{c.id}}</td>
					<td>{{c.name}}</td>
					<td>{{c.price | currency:"￥："}}(万元)</td>
					<td>
						<button ng-click="delete(c.name)">删除</button>
						<button ng-click="update(c)">修改</button>
					</td>
				</tr>
			</table>
			<br />
			<button ng-click="Add()">新车入库</button>
			<br />
			<div ng-show="isShow">
				<h3>添加</h3>
				<input type="text" placeholder="请输入编号" ng-model="newId" /><br /><br />
				<input type="text" placeholder="请输入名称" ng-model="newName" /><br /><br />
				<input type="text" placeholder="请输入价格" ng-model="newPrice" /><br /><br />
				<input type="button" value="添加" ng-click="AddCar()" />
			</div>

			<div ng-show="isUp">
				<h3>修改</h3>
				<input type="text" ng-model="upId" disabled="disabled" /><br /><br />
				<input type="text" ng-model="upName" /><br /><br />
				<input type="text" ng-model="upPrice" /><br /><br />
				<input type="button" value="修改" ng-click="UpCar()" />
			</div>
		</center>
	</body>

</html>