Angularjs 增删改查全选反选批量删除总价总数

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			.css1{
				background-color: red;
			}
			
			.css2{
				background-color: brown;
			}
			
		</style>
	</head>
	<body ng-controller="Demo">
		
		<input type="text" placeholder="请输入查询商品" ng-model="search" /> 
			数量排序:
			<select ng-model="selOrder">
				<option value="nums">数量正序</option>
				<option value="-nums">数量倒序</option>
			</select>
			<button ng-click="delSelect()" class="sb">批量删除</button><br />
			
			
			<table border="2px" cellspacing="0">
			
			<tr>
				<!--<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>-->
				<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
				<td>产品编号</td>
				<td>产品名称</td>
				<td>购买数量</td>
				<td>产品单价</td>
				<td>产品总价</td>
				<td>操作</td>
			</tr>
			
			
			
			<tr ng-repeat="x in datas | filter:{name:search}| orderBy:selOrder" class="{{ $even ? 'css1':'css2'}}">
				
				<td><input type="checkbox" ng-model="x.state"/></td>
				<td>{{x.id}}</td>
				<td>{{x.name}}</td>
				<td>
					<button ng-click="jian($index)">-</button>
					
					<input type="number" ng-model="x.nums"/>
					<button ng-click="add($index)">+</button>
				</td>
				<td>{{x.prices}}</td>
				<td>{{x.prices*x.nums}}</td>
				<td><button ng-click="remove($index)">移除</button>
					<button ng-click="updateShowFun($index)">修改</button>
				</td>
			</tr>
		</table>
		
		
		<div>
			<span>总价</span>
			<span>{{totalPrice()}}</h3>
			<span>总数</h3>
			<span>{{totalNum()}}</h3>
			<button ng-click="removeAll()">清空购物车</button>
			
		</div>
		
		
		<form style="border: 1px solid yellow; width: 260px;">
					
					商品编号:<input type="text" ng-model="ID"/><br />
					商品名称:<input type="text" ng-model="IDname"/><br />
					商品数量:<input type="number" ng-model="IDnum"/><br />
					商品单价:<input type="text" ng-model="IDprice"/><br />
					
					<button ng-click="add333()">添加</button>
					
				</form>
			
			<form style="border: solid black; width: 300px;" ng-show="updateShow">
					商品编号:<input type="text" ng-model="updateId"/><br />
					商品名称:<input type="text" ng-model="updateName"/><br />
					商品数量:<input type="number" ng-model="updateNum"/><br />
					商品单价:<input type="number" ng-model="updatePrice"/><br />
					<button type="button" value="提交" ng-click="updateSub()">提交</button>
					
				</form>
		
		<script src="../libs/angular.min.js"></script>
		
		<script>
			var App = angular.module("App",[]);
			App.controller("Demo",function($scope){
				
				//数据
				$scope.datas = [
					{
						id:1001,
						name:"ihone8",
						nums:1,
						prices:3888,
						state: false
					}
					,
					{
						id:1002,
						name:"ihone10",
						nums:1,
						prices:6888,
						state: false
					}
					,
					{
						id:1003,
						name:"ihone7",
						nums:1,
						prices:5888,
						state: false
					}
				];
				
				//数量减减
				$scope.jian = function(index){
					
					$scope.datas[index].nums--;
					
				}
				
				//数量加加
				$scope.add = function(index){
					
					$scope.datas[index].nums++;
					
				}
				
				//移除的
				$scope.remove = function(index){
					if(confirm("确定要移除吗?")){
						$scope.datas.splice(index,1);
					}
					
					
				}
				
				//全选和反选
				$scope.selectAllFun = function(){
					if($scope.selectAll){
						//如果是true的话,把下面的都选中
						
					
					for (var x=0;x<$scope.datas.length;x++) {
						
						$scope.datas[x].state = true;
					}
						
					}else{   //全部不选中
						for (var x=0;x<$scope.datas.length;x++) {
						
						$scope.datas[x].state = false;
					}
					}
				}
				
				
				//批量删除 名字进行删除
				$scope.delSelect = function(){
					
					var arrs =[];
					for (var x=0;x<$scope.datas.length;x++) {
						if($scope.datas[x].state){
							arrs.push($scope.datas[x].name);
						}
					}
					
					if(arrs.length<=0){
						alert("请您选中你要删除的数据")
					}else{
						//开始进行删除
						
						for (var x=0;x<arrs.length;x++) {
							
							for (var x2=0;x2<$scope.datas.length;x2++) {
								
								if(arrs[x]==$scope.datas[x2].name){
									//删除
									$scope.datas.splice(x2,1);
								}
								
							}
							
							
						}
					}
				}
				
				
				//总价
				$scope.totalPrice = function(){
					
					var totalPrice=0;
					
					for (var x=0;x<$scope.datas.length;x++) {
						
						totalPrice+=$scope.datas[x].prices *$scope.datas[x].nums;
					}
					
					return totalPrice;
					
				}
				
				
				//总数
				$scope.totalNum = function(){
					
					var totalNums=0;
					
					for (var x=0;x<$scope.datas.length;x++) {
						
						totalNums+=$scope.datas[x].nums;
					}
					
					return totalNums;
					
				}
				
				//清空购物车
				$scope.removeAll = function(){
					$scope.datas =[];
				}
				//增加数据的方法
				$scope.add333 = function(){
					
					/*ng-model="ID"/><br />
					商品名称:<input type="text" ng-model="IDname"/><br />
					商品数量:<input type="text" ng-model="IDnum"/><br />
					商品单价:<input type="text" ng-model="IDprice"*/
					
					var flag1 = false;
					
					if($scope.ID=="" || $scope.ID==null){
						flag1 = false;
						alert("ID不能为空")
						
						return;
					}else if(isNaN($scope.ID)){  //如果传入的参数是非数字返回true,如果是数字返回false
						flag1 = false;
						alert("ID必须是数字")
						return;
					}else{
						flag1 = true;
					}
					
					if($scope.IDname=="" || $scope.IDname==null){
						flag1 = false;
						alert("IDname不能为空")
						return;
					}else{
						flag1 = true;
					}
					
					if($scope.IDnum=="" || $scope.IDnum==null){
						flag1 = false;
						alert("IDnum不能为空")
						return;
					}else if(isNaN($scope.IDnum)){  //如果传入的参数是非数字返回true,如果是数字返回false
						flag1 = false;
						alert("IDnum必须是数字")
						return;
					}else{
						flag1 = true;
					}
					
					if($scope.IDprice=="" || $scope.IDprice==null){
						flag1 = false;
						alert("IDnum不能为空")
						return;
					}else if(isNaN($scope.IDprice)){  //如果传入的参数是非数字返回true,如果是数字返回false
						flag1 = false;
						alert("IDnum必须是数字")
						return;
						
					}else{
						flag1 = true;
					}
					
					
					if(flag1){
						//添加数据到原始的集合里面
						$scope.datas.push({
							
						id:$scope.ID,
						name:$scope.IDname,
						nums:$scope.IDnum,
						prices:$scope.IDprice,
						
					
						});
					}
					
				
				}
				
					
					var index333 = 0;
				
				//修改的
				$scope.updateShowFun = function(index){
					
					index333=index; 
					
					if(confirm("确定要修改吗")){
						$scope.updateShow = true;
						
					}
					
				}
				
				
				
				//提交按钮
				$scope.updateSub = function(){
					
					$scope.datas[index333].id = $scope.updateId;
							$scope.datas[index333].name = $scope.updateName;
							$scope.datas[index333].nums= $scope.updateNum;
							$scope.datas[index333].prices = $scope.updatePrice;
					
					
					
					/*for (var x=0;x<$scope.datas.length;x++) {
						
						$scope.datas.[index333]
						
						if($scope.datas[x].id==$scope.updateId){
							$scope.datas[x].id = $scope.updateId;
							$scope.datas[x].name = $scope.updateName;
							$scope.datas[x].nums= $scope.updateNum;
							$scope.datas[x].prices = $scope.updatePrice;
						}
						
						
						
					}*/
					
				}
				
				
				
			});
			
		</script>
	</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值