1. 程式人生 > >AngularJs 增刪改查+刪除+批量刪除+全反選

AngularJs 增刪改查+刪除+批量刪除+全反選

<head>
	<meta charset="utf-8" />
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<title></title>
	<style type="text/css">
		img {
			height: 60px;
			width: 60px;
		}
	</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

	<select ng-model="by">
		<option value="">--請選擇--</option>
		<option value="price">價格正序</option>
		<option value="-price">價格倒敘</option>
		<option value="regDate">時間正序</option>
		<option value="-regDate">時間倒敘</option>
	</select>
	<br>
	<input type="text" placeholder="根據名字進行查詢" ng-model="name" />
	<br>
	<select ng-model="by2">
		<option value="">--請狀態查詢--</option>
		<option value="已發貨">發貨</option>
		<option value="未發貨">未發貨</option>
	</select>
	<br>
	<input type="button" value="全選" ng-click="qx()" />
	<input type="button" value="全不選" ng-click="qbx()" />
	<table border="1px" cellspacing="0" cellpadding="0">
		<tr ng-repeat="phone in phones|filter:name|orderBy:by|filter:by2">
			<td><input type="checkbox" ng-model="phone.ck" /></td>
			<td><img src=""/></td>
			<td>{{phone.gname}}</td>
			<td>{{phone.address}}</td>
			<td>{{phone.regDate|date:"yyyy-MM-dd"}}</td>
			<td>{{phone.price|currency:"¥:"}}</td>
			<!--
				注意語法
			-->
			<td>
				<input type="text" ng-model="phone.num" />
			</td>
			<td>{{phone.price*phone.num|currency:"¥:"}}</td>
			<td>{{phone.state}}</td>
			<td>
				<input type="button" name="" id="" value="修改" ng-click="xiugai(phone)" />
				<input type="button" name="" id="" value="刪除" ng-click="dele(phone.gname)" />
			</td>
		</tr>

	</table>
	<span>
		總價:{{sum()|currency:"¥:"}}
	</span>
	<br>
	<input type="button" value="增加" ng-click="show()" />
	<input type="button" value="批量刪除" ng-click="piliang()" />
	<!--
		新增
	-->
	<div class="add" ng-show="add_show">
		<fieldset style="width: 300px;height: 250px;">
			<legend>新增資訊</legend>
			<input type="text" placeholder="商品不能為空" ng-model="gname12" /><br>
			<input type="text" placeholder="價格大於0" ng-model="price12" /><br>
			<input type="text" placeholder="數量大於0" ng-model="num12" /><br> 請選擇:
			<br>
			<select class="sheng" ng-model="sheng12">

			</select>
			<select class="shi" ng-model="shi12">

			</select>
			<input type="button" value="提交" ng-click="save()" />
		</fieldset>
	</div>
	<!--
		修改
	-->
	<div class="xiu_view" ng-show="xiu_show">
		<table border="1px" cellspacing="0" cellpadding="0">
			<tr>
				<td><input type="checkbox" ng-model="phone.ck" /></td>
				<td><img src="img/one.png" /></td>
				<td>{{name123}}</td>
				<td>{{address123}}</td>
				<td>{{time123|date:"yyyy-MM-dd"}}</td>
				<td>{{price123|currency:"¥:"}}</td>
				<!--
				注意語法
			-->
				<td>
					<input type="text" ng-model="num123" />
				</td>
				<td>{{xj|currency:"¥:"}}</td>
				<td>{{state123}}</td>
				<td>
					<input type="button" name="" id="" value="儲存" ng-click="save123()" />
					<input type="button" name="" id="" value="刪除" ng-click="dele(phone.gname)" />
				</td>
			</tr>

		</table>
	</div>
	<script type="text/javascript">
		//--------------二級列表

		var arr = new Array();
		arr["北京"] = new Array("西二旗", "榆垡");
		arr["遼寧"] = new Array("瀋陽", "大連");
		//填充省的資訊
		for(var s in arr) {
			$(".sheng").append("<option>" + s + "</option>");
		}
		$(".sheng").change(function() {
			var sh = $(this).val();
			var shis = arr[sh];
			$(".shi").empty();
			for(var i = 0; i < shis.length; i++) {
				var shi = shis[i];
				$(".shi").append("<option>" + shi + "</option>");
			}
		});
		//--------------angularjs
		var m = angular.module("myApp", []);
		m.controller("myCtrl", function($scope, $http) {

			$scope.phones = [];
			//獲取資料
			$http.get("phones.json").then(function(response) {

				$scope.phones = response.data;

			});
			//全選
			$scope.qx = function() {
				for(var i = 0; i < $scope.phones.length; i++) {
					var g = $scope.phones[i];
					g.ck = true;
				}
			}

			$scope.qbx = function() {
				for(var i = 0; i < $scope.phones.length; i++) {
					var g = $scope.phones[i];
					g.ck = false;
				}
			}
			//計算總價
			$scope.sum = function() {
				var s = 0;
				for(var i = 0; i < $scope.phones.length; i++) {
					var g = $scope.phones[i];
					var xj = g.num * g.price;
					s += xj;
				}
				return s;
			}
			//單個刪除
			$scope.dele = function(gname) {

				var b = confirm("確定刪除嗎?");
				if(b) {
					for(var i = 0; i < $scope.phones.length; i++) {
						var g = $scope.phones[i];
						if(g.gname == gname) {
							$scope.phones.splice(i, 1);
						}
					}
				}

			}
			//批量刪除
			$scope.piliang = function() {
				var flag = false;
				var b = confirm("確定刪除嗎?");
				if(b) {
					for(var i = $scope.phones.length - 1; i >= 0; i--) {
						var g = $scope.phones[i];
						if(g.ck) {
							flag = true;
							$scope.phones.splice(i, 1);
						}
					}
				}

				if(flag == false) {
					alert("選一個呀")
				}
			}
			//新增,提交
			$scope.save = function() {
				//驗證名字
				var gname = $scope.gname12;
				if(gname == "" || gname == null || gname == undefined) {
					alert("名字不為空");
					return;
				}

				//驗證價格
				var price12 = $scope.price12;
				if(price12 == "" || price12 == null || price12 == undefined) {
					alert("價格不為空");
					return;
				}
				if(price12 < 0) {
					alert("價格需要大於0")
					return;
				}

				//驗證數量
				var num12 = $scope.num12;

				if(num12 == "" || num12 == null || num12 == undefined) {
					alert("數量不為空");
					return;
				}
				if(num12 < 0) {
					alert("數量需要大於0")
					return;
				}
				//地址
				var shi = $(".shi").val();
				//建立物件
				var obj = {
					"gname": gname,
					"address": shi,
					"num": num12,
					"regDate": "1371120093221",
					"price": price12,
					"state": "未發貨"
				};

				$scope.phones.push(obj);

				//移倉新增頁面
				$scope.add_show = false;
			}
			//顯示新增頁面
			$scope.show = function() {
				$scope.add_show = true;
			}
			//修改
			$scope.xiugai = function(phone) {
				//顯示修改頁面
				$scope.xiu_show = true;
				//回顯資料
				$scope.name123 = phone.gname;
				$scope.address123 = phone.address;
				$scope.time123 = phone.regDate;
				$scope.price123 = phone.price;
				$scope.state123 = phone.state;
				$scope.num123 = phone.num;
				$scope.xj = phone.price * phone.num;
			}
			//修改完畢之後的儲存
			$scope.save123 = function() {
				//驗證名字
				var gname = $scope.name123;

				//驗證價格
				var price12 = $scope.price123;

				//驗證數量
				var num12 = $scope.num123;

				//地址
				var shi = $scope.address123;
				//建立物件
				var obj = {
					"gname": gname,
					"address": shi,
					"num": num12,
					"regDate": "1371120093221",
					"price": price12,
					"state": "未發貨"
				};

				for(var i = $scope.phones.length - 1; i >= 0; i--) {
					var g = $scope.phones[i];
					if(g.gname == gname) {
						$scope.phones.splice(i, 1, obj);
					}
				}

				//修改頁面後,修改頁面消失
				$scope.xiu_show = false;
				//移倉新增頁面
				//					$scope.add_show = false;
			}
		});
	</script>
</body>