AngularJS购物车应用-优快云博客

本文链接：https://blog.youkuaiyun.com/ChEngDieYl/article/details/78610188

数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular-1.5.5/angular.js" ></script>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				$scope.products = [{
					"id":80,
					"name":"iPhone",
					"price":5400,
					state:false
				},{
					"id":1200,
					"name":"ipad mini",
					"price":2200,
					state:false
				},{
					"id":500,
					"name":"ipad air",
					"price":2340,
					state:false
				},{
					"id":290,
					"name":"ipad",
					"price":1420,
					state:false
				},{
					"id":910,
					"name":"imac",
					"price":15400,
					state:false
				}];

过滤

				//按照年龄进行过滤
				$scope.search = "";
				//下拉菜单过滤商品价格范围
				$scope.productPrice = "--请选择--";
				$scope.isShow = function(price){
					if($scope.productPrice == "--请选择--"){
						return true;
					}else{
						var priceArr = $scope.productPrice.split("-");
						var min = priceArr[0];
						var max = priceArr[1];
						if(price < min || price > max){
							return false;
						}else{
							return true;
						}
					}
				}

全选全不选

				//全选
				$scope.selectAll = false;
				$scope.selectAllFun = function(){
					if($scope.selectAll){
						for(index in $scope.products ){
							$scope.products[index].state = true;
						}
					}else{
						for(index in $scope.products ){
							$scope.products[index].state = false;
						}
					}
				}
				//全不选
				$scope.checkSelectAll = function(){
					var a = 0
					for(index in $scope.products){
						if(!$scope.products[index].state){
							$scope.selectAll = false;
						}else{
							a++;
						}
						if(a == $scope.products.length){
							$scope.selectAll = true;
						}else{
							$scope.selectAll = false;
						}
					}
				}

批量删除单个删除

				//批量删除
				$scope.delSelect = function(){
					var arr = [];
					for(index in $scope.products){
						if($scope.products[index].state ){
							arr.push($scope.products[index].name);
						}
					}
					if(arr.length <= 0){
						alert("请选择删除项！！！");
					}else{
						if(window.confirm("确定删除吗？")){
							for(index in arr ){
								for(index2 in $scope.products){
									if(arr[index] == $scope.products[index2].name ){
										$scope.products.splice(index2,1);
									}
								}
							}
						}
					}
				}
				//单行删除
				$scope.del = function(name){
					if(window.confirm("确定删除吗")){
						for(index in $scope.products){
						if(name == $scope.products[index].name){
							$scope.products.splice(index,1);
						}
					}
					}
				}

添加商品并验证

				//新增商品
				$scope.formShow = false;
				$scope.formShowFun = function(){
					if($scope.formShow){
						$scope.formShow = false;
					}else{
						$scope.formShow = true;
						$scope.updateShow=false;
					}
				}
				
				
				//提交新加商品进行验证
				$scope.newId = "";
				$scope.newName = "";
				$scope.newPrice = "";
				$scope.checkSub = [];
				$scope.divShow = false;
				$scope.tijiao = function(){
					$scope.checkSub = [];
					if($scope.newId == "" || $scope.newId == null){
						$scope.checkSub.push("产品编号为空");
					}else if(isNaN($scope.newId)){
						$scope.checkSub.push("产品编号不是整数");
					}
					if($scope.newName == "" || $scope.newName == null){
						$scope.checkSub.push("产品名称为空");
					}
					
					if($scope.newPrice == "" || $scope.newPrice == null){
						$scope.checkSub.push("产品价格为空");
					}else if(isNaN($scope.newPrice)){
						$scope.checkSub.push("产品价格不是整数")
					}
					
					if($scope.checkSub.length > 0){
						$scope.divShow = true;
					}else{
						$scope.divShow = false;
						var newPro = {
							"id":parseInt($scope.newId),
							"name":$scope.newName,
							"price":parseInt($scope.newPrice),
							 state:false
						};
						$scope.products.push(newPro);
					}
				}

修改页面

//修改页面
				$scope.updateShow = false;
				$scope.updateId = "";
				$scope.updateName = "";
				$scope.updatePrice = "";
				$scope.updateShowFun = function(pro) {
					$scope.updateShow = true;
					$scope.formShow = false;
					$scope.updateId = pro.id;
					$scope.updateName = pro.name;
					$scope.updatePrice = pro.price;
				}
				$scope.updateSub = 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) {
						$scope.haha = true;
					} else {
						$scope.haha = false;
						for(index in $scope.products) {
							if(parseInt($scope.updateId) == $scope.products[index].id) {
								$scope.products[index].name = $scope.updateName;
								$scope.products[index].price = $scope.updatePrice;
								$scope.updateShow = false;
							}
						}
					}
				}
				
			});
		</script>
	</head>

主界面

<body ng-app="myApp" ng-controller="myCtrl">
		<center>
		<h3>购物车</h3>
		<input type="text" placeholder="产品名称" size="10" ng-model="search"/>产品名称
		<select ng-model="productPrice">
			<option>--请选择--</option>
			<option>0-2000</option>
			<option>2001-3000</option>
			<option>3001-4000</option>
			<option>4001-5000</option>
			<option>5001-6000</option>
			<option>6001-7000</option>
			<option>7001-8000</option>
			<option>8001-无穷大</option>
		</select>
		<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>
		<button ng-click="delSelect()">批量删除</button>
		<br /><br />
		<table border="1px solid blue" cellpadding="8" cellspacing="0">
			<thead>
				<tr>
					<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
					<th>产品编号</th>
					<th>产品名称</th>
					<th>产品价格</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			<tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">
				<td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()"></td>
				<td>{{pro.id}}</td>
				<td>{{pro.name}}</td>
				<td>{{pro.price}}</td>
				<td>
					<button ng-click="del(pro.name)">删除</button>
					<button ng-click="updateShowFun(pro)">修改</button>
				</td>
			</tr>
		</tbody>
		</table><br /><br />
		<button ng-click="formShowFun()">添加新产品</button>

添加商品界面

<form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
			<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 />
			<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
				<ul>
					<li ng-repeat="chenk in checkSub">{{chenk}}</li>
				</ul>
			</div><br />
			<input type="button" value="提交"  ng-click="tijiao()"/>
		</form>

修改商品的界面

<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
			<h3>修改商品</h3>商品编号：
			<input type="text" placeholder="商品编号" ng-model="updateId"/><br /><br />商品名称：
			<input type="text" placeholder="商品名称" ng-model="updateName"/><br /><br />商品价格：
			<input type="text" placeholder="商品价格" ng-model="updatePrice"/><br /><br />
			<div style="border: 1px solid blue; width: 250px; background-color: pink;>
				<ul>
					<li ng-repeat="chenk in checkSub">{{chenk}}</li>
				</ul>
			</div><br />
			<input type="button" value="提交" ng-click="updateSub()" />
		</form>
	</body>
</html>

AngularJS增删改