angularJS增删改查过滤排序

sui_yz
于 2018-01-15 09:31:40 发布
阅读量125
点赞数
本文链接：https://blog.csdn.net/sui_yz/article/details/79061070
版权
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table tr:nth-child(even) {
				background: #eee;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/angular.min.js"></script>
		<script>
			var myapp = angular.module("modu", []);
			myapp.controller("con", function($scope) {
				$scope.stus = [{
						id: 1,
						ck: false,
						gname: "华为p10",
						price: 3588,
						num: 2
					},
					{
						id: 2,
						ck: false,
						gname: "小米6",
						price: 2499,
						num: 3
					},
					{
						id: 3,
						ck: false,
						gname: "三星A5",
						price: 1500,
						num: 4
					}
				];

				$scope.sun = function() {
					var zong = 0;
					for(var i in $scope.stus) {
						zong += $scope.stus[i].price * $scope.stus[i].num;
					}
					return zong;
				}

				$scope.xuan = function() {
					for(var i in $scope.stus) {
						$scope.stus[i].ck = $scope.flag;
					}
				}

				$scope.gcount = function(cou, name) {
					for(var i = 0; i < $scope.stus.length; i++) {
						if($scope.stus[i].gname == name) {
							if($scope.stus[i].num == 1 && cou == -1) {
								if(confirm("是否删除该商品?")) {
									$scope.stus.splice(i, 1);
								}
							} else {
								$scope.stus[i].num = $scope.stus[i].num + cou;
							}
						}
					}
				}

				$scope.del = function(name) {
					for(var i in $scope.stus) {
						if($scope.stus[i].gname == name) {
							$scope.stus.splice(i, 1);
						}
					}

					//判断是否还有数据进行显示隐藏
					if($scope.stus.length == 0) {
						$scope.z = false;
					}
				}

				$scope.delall = function() {
					for(var i = 0; i < $scope.stus.length; i++) {
						if($scope.stus[i].ck) {
							$scope.stus.splice(i, 1);
							i--;
						}
					}
					//判断是否还有数据进行显示隐藏
					if($scope.stus.length == 0) {
						$scope.z = false;
					}
				}

				$scope.add = function() {

					$scope.updatesub = [];
					if($scope.add_id=="" || $scope.add_id==null) {
						$scope.updatesub.push("商品ID不能为空");
					} 
					if($scope.add_name=="" || $scope.add_name==null){
						$scope.updatesub.push("商品名不能为空");
					}
					if($scope.add_price=="" || $scope.add_price==null){
						$scope.updatesub.push("商品价格不能为空");
					}
					if($scope.add_num=="" || $scope.add_num==null){
						$scope.updatesub.push("商品数量不能为空");
					}
					
					if ($scope.updatesub.length==0) {
						var good = {
							id: $scope.add_id,
							ck: false,
							gname: $scope.add_name,
							price: $scope.add_price,
							num: $scope.add_num
						}
						$scope.stus.push(good);
						$scope.f = false;
					} 
					
				}
				//默认状态的值为true
				$scope.z = true;
				
//				修改
				$scope.updategood=function(good){
					$scope.flag_gai=true;
					$scope.update_id=good.id;
					$scope.update_name=good.gname;
					$scope.update_price=good.price;
					$scope.update_num=good.num;
				}
				$scope.update=function(){
					var id=$scope.update_id;
					for (var i in $scope.stus) {
						if($scope.stus[i].id==id){
							$scope.stus[i].gname=$scope.update_name;
							$scope.stus[i].price=$scope.update_price;
							$scope.stus[i].num=$scope.update_num;
							$scope.flag_gai=false;
						}
					}
				}
				
				$scope.selprice=function(price){
					if ($scope.s_price==undefined || $scope.s_price=="") {
						return true;
					}
					
					var prices=$scope.s_price.split("-");
					if (price>=prices[0] && price<=prices[1]) {
						return true;
					} else{
						return false;
					}
				}
			})
		</script>
	</head>

	<body ng-app="modu" ng-controller="con">

		<h3>我的购物车</h3>

		<div ng-show="z">
			<input placeholder="输入关键字搜索" ng-model="sname" />
			<select ng-model="pai">
				<option value="">请选择如何排序</option>
				<option value="num">数量正序</option>
				<option value="-num">数量倒序</option>
				<option value="price">价格正序</option>
				<option value="-price">价格倒序</option>
			</select>
			<select ng-model="s_price">
				<option value="">选择价格区间</option>
				<option value="1000-2500">1000-2500</option>
				<option value="2500-5000">2500-5000</option>
			</select>
			
			<button ng-click="f=true">商品入库</button><br />
			<button ng-click="delall()">清空购物车</button>
			
			<table border="1" cellspacing="1" width="700">
				<tr style="background: #999;">
					<td><input type="checkbox" ng-model="flag" ng-click="xuan()" /> </td>
					<td>id</td>
					<td>商品名</td>
					<td>价格</td>
					<td>数量</td>
					<td>小计</td>
					<td>操作</td>
				</tr>

				<tr ng-repeat="g in stus | filter:{gname:sname} | orderBy:pai" ng-show="selprice(g.price)">
					<td><input type="checkbox" ng-model="g.ck" /> </td>
					<td>{{g.id}}</td>
					<td>{{g.gname}}</td>
					<td>{{g.price | currency:"￥"}}</td>
					<td><button style="width: 30px;" ng-click="gcount(-1,g.gname)">-</button> <input style="width: 30px;" ng-model="g.num" /> <button style="width: 30px;" ng-click="gcount(1,g.gname)">+</button></td>
					<td>{{g.price*g.num | currency:"￥"}}</td>
					<td><button ng-click="del(g.gname)">删除</button> <button ng-click="updategood(g)">修改</button> </td>
				</tr>
				<tr style="background: white;">
					<td colspan="7"> 总价为：{{sun() | currency:"￥"}}</td>
				</tr>
			</table>
		</div>

		<h3 ng-hide="z">购物车为空，请继续购物</h3>

		<div style="width: 300px; height: 300px; border: 1px solid #000000; margin-left: 100px; margin-top: 10px;" ng-show="f">
			id:<input type="number" ng-model="add_id" /><br /> 商品名：
			<input ng-model="add_name" /><br /> 商品价格：
			<input ng-model="add_price" type="number" /><br /> 商品数量：
			<input ng-model="add_num" type="number" /><br />
			<button ng-click="add()">添加</button>
			<!--错误提示-->
			<div style="background-color: #11C1F3;" ng-show="f">
				<ul>
					<li ng-repeat="aa in updatesub">{{aa}}</li>
				</ul>
			</div>

		</div>
		
		
		<div style="width: 300px; height: 300px; border: 1px solid #000000; margin-left: 100px; margin-top: 10px;" ng-show="flag_gai">
			id:<input type="number" ng-model="update_id" disabled="disabled"/><br /> 
			商品名：<input ng-model="update_name" required="required" /><br /> 
			商品价格：<input ng-model="update_price" type="number" required="required"/><br /> 
			商品数量：<input ng-model="update_num" type="number" required="required"/><br />
			<button ng-click="update()">修改</button>
			
		</div>

	</body>

</html>