html angular购物车全选+全删+批量删除+单独删除+模糊查找+筛选价格区间

本文链接：https://blog.youkuaiyun.com/qq_40143811/article/details/78295998

本文介绍了一个使用AngularJS实现的购物车应用案例，通过该案例可以了解到如何使用AngularJS进行数据绑定、过滤及排序等功能，并实现了商品的增删、全选及价格筛选等实用功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<script type="text/javascript" src="js/angular.js"></script>
		<!--<script src="jquery-3.2.1.js"></script>-->
		<script>
			var app = angular.module("myApp", []);
			app.controller("myController", function($scope) {
				$scope.user = [{
						checked: false,
						id: "1324",
						name: "ipad",
						price: 2000,
						num: "10",
						item: "0"
					},
					{
						checked: false,
						id: "4567",
						name: "aphone",
						price: 5000,
						num: "100",
						item: "1"
					},
					{
						checked: false,
						id: "3546",
						name: "mypad",
						price: 4400,
						num: "20",
						item: "2"
					},
					{
						checked: false,
						id: "1987",
						name: "zpad",
						price: 3000,
						num: "120",
						item: "3"
					}
				]
				$scope.nc = function(index) {
					if(confirm("确认删除")) {
						$scope.user.splice(index, 1)
					}

					//					if($scope.user[index].checked == false) {
					//						alert("请选中后删除");
					//					} else {
					//						if(confirm("确认删除")) {
					//							$scope.user.splice(index, 1)
					//						}
					//					}

				}
				$scope.qs = function() {
					if(confirm("确认全删")) {
						$scope.user = [];
					}
				}

				/*批量删除*/
				$scope.piliang = function() {
					if(confirm("确认删除?")) {
						for(var i = 0; i < $scope.user.length; i++) {
							if($scope.user[i].checked == true) {
								$scope.user.splice(i, 1);
								i--;
							}
						}
					}
				}

				$scope.selectAllClick = function(sa) {
					for(var i = 0; i < $scope.user.length; i++) {
						$scope.user[i].checked = sa;
					}
				}
				$scope.echoChange = function(ck, id) {
					if(ck == false) {
						$scope.user[id].checked = true;
					} else {
						$scope.user[id].checked = false;
					}
				}
				$scope.togg = function(tit) {
					$scope.title = tit;
					$scope.desc = !$scope.desc;
				}

				//判断价格范围
				$scope.size = "--请选择--";
				$scope.priceSize = function(price, size) {
					if(size == "--请选择--") {
						return true;
					} else {
						var arr = size.split("-");
						var priceMin = arr[0];
						var priceMax = arr[1];
						if(price > priceMin && price <= priceMax) {
							return true;
						} else {
							return false;
						}
					}
				}

			});
		</script>
		<style>
			.d {
				width: 100%;
				height: 50px;
				background: gainsboro;
			}
			
			td {
				background: white;
			}
		</style>
	</head>

	<body ng-app="myApp" ng-controller="myController">
		<div class="d">
			<input type="text" size="8" style="float: left;line-height: 30px" placeholder="请输入你想搜索的内容" ng-model="serch">
			<button style="float: right;line-height: 30px" ng-click="qs()">全部删除</button>
			<center><button style="line-height: 30px" ng-click="piliang()">批量删除</button></center>
		</div>
		<div>价格：
			<select ng-model="size">
				<option>--请选择--</option>
				<option>1000-2000</option>
				<option>2000-3000</option>
				<option>3000-4000</option>
				<option>4000-5000</option>
				<option>5000-6000</option>
			</select>&nbsp;&nbsp;
		</div>
		<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
			<tr>
				<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
				<td ng-click="togg('id')">商品编号</td>
				<td ng-click="togg('name')">商品名称</td>
				<td ng-click="togg('price')">商品价格</td>
				<td ng-click="togg('num')">商品库存</td>
				<td>数据操作</td>
			</tr>
			<tr ng-repeat="u in user|filter:serch|orderBy:title:desc" ng-if="priceSize(u.price,size)">
				<!--<tr ng-repeat="u in user| filter:{name:serch} |orderBy:title:desc">-->
				<td><input type="checkbox" ng-checked="u.checked" ng-click="echoChange(u.checked,$index)"></td>
				<td>{{u.id}}</td>
				<td>{{u.name}}</td>
				<td>{{u.price}}</td>
				<td>{{u.num}}</td>
				<td><button ng-click="nc($index)">删除</button></td>
			</tr>
		</table>
	</body>

</html>