购物车2

最新推荐文章于 2019-11-02 23:59:33 发布

Mike_8859

最新推荐文章于 2019-11-02 23:59:33 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78596363

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular.js"></script>
		<style>
			button {
				background-color: #337AB7;
			}
			
			input {
				width: 20px;
				height: 15px;
			}
		</style>
		<script type="text/javascript">
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {
				$scope.user = [{
					name: "QQ",
					price: "12.9",
					num: 1,
					check: false
				}, {
					name: "WX",
					price: "23.9",
					num: 1,
					check: false
				}, {
					name: "momo",
					price: "99.9",
					num: 1,
					check: false
				}];

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

				//批量删除
				$scope.delAll = function() {
					for(var i = 0; i < $scope.user.length; i++) {
						if($scope.user[i].check == true) {
							$scope.user.splice(i, 1);
							i--;
						} else {
							alert("请选择删除的商品");
						}

						if($scope.user.length == 0){
							$scope.isShow = false;
						}
					}

				}

				$scope.isShow = true;

				//删除
				$scope.delete = function(index) {
					$scope.user.splice(index, 1);
					
					if($scope.user.length == 0){
							$scope.isShow = false;
						}
				}

				//加
				$scope.add = function(index) {
					$scope.user[index].num++;
				}
				//减
				$scope.minus = function(index) {
					if($scope.user[index].num > 1) {
						$scope.user[index].num--;
					} else if($scope.user[index].num == 1) {
						var s = confirm("是否移除改商品");
						if(s) {
							$scope.user.splice(index, 1);
						} else {
							alert("不了");
						}

					}

				}

				//总价
				$scope.priceall = function() {
					var priceAll = 0;
					for(var i = 0; i < $scope.user.length; i++) {
						priceAll += $scope.user[i].price * $scope.user[i].num;
					}
					return priceAll;
				}

			});
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h3>我的购物车</h3>
			<div ng-show="isShow">
				<button style="background: #D9534F;" ng-click="delAll()">清空购物车</button>
				<table border="1" cellspacing="0" cellpadding="10">
					<tr>
						<th><input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /></th>
						<th>name</th>
						<th>price</th>
						<th>number</th>
						<th>totalPrice</th>
						<th>option</th>
					</tr>
					<tr ng-repeat="u in user">
						<td><input type="checkbox" ng-model="u.check" /></td>
						<td>{{u.name}}</td>
						<td>{{u.price | currency:"￥"}}</td>
						<td>
							<button ng-click="add($index)">+</button><input type="text" ng-model="u.num" />

							<button ng-click="minus($index)">-</button>
						</td>
						<td>{{(u.price)*(u.num)| currency:"￥"}}</td>
						<td><button ng-click="delete($index)">删除</button></td>
					</tr>
					<tr>
						<td colspan="6">总价为:￥<span ng-bind="priceall()">
						
					</span></td>
					</tr>
				</table>
		</center>
		</div>
	</body>

</html>

Mike_8859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车2

button { background-color: #337AB7; } input { width: 20px; height: 15px; } var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $
复制链接

扫一扫