nan angular

最新推荐文章于 2021-11-16 19:20:44 发布
原创最新推荐文章于 2021-11-16 19:20:44 发布
· 293 阅读
版权
<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.css1{
				background-color: aquamarine;
			}
			
			.css2{
				background-color: bisque;
			}
		</style>
	</head>
	<body ng-controller="Democtrl">
		<div>
			<input type="text" placeholder="请输入查询的商品" ng-model="search"/>数量排序
			<select ng-model="numsBy">
				<option value="numss">数量正序</option>
				<option value="-numss">数量倒序</option>
			</select>
			<button ng-click="deleteAll()">批量删除</button>
		</div>
		
		<table border="1">
			<tr>
				<td><input type="checkbox" ng-click="selectAll()"/></td>
				<td >产品编号</td>
				<td >产品名称</td>
				<td >购买数量</td>
				<td >产品单价</td>
				<td >产品总价</td>
				<td >操作</td>
			</tr>
			
			<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numsBy" 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.numss">      
					<button ng-click="add($index)">+</button>
					
				</td>
				<td>{{x.price}}</td>
				<td>{{x.price*x.numss}}</td>
				<td>
					<button ng-click="remove($index)">删除</button>
				</td>
				
				<td>
					<button ng-click="xiougai($index)">修改</button>
				</td>
				
			</tr>
			
		</table>
		
		<div>
			<span>总价</span>
			<span>{{totalPrices()}}</span>
			
			<span>数量</span>
			<span>{{numAll()}}</span>
			
			<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="add3()">添加</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="text" ng-model="updatePrice" /><br />
			
			<button type="button" value="提交" ng-click="updateSub()">提交</button>
		</form>
		
		<script type="application/javascript" src="js/angular.min.js"></script>
		
		<script>
			var App = angular.module("App",[]);
			
			App.controller("Democtrl",function($scope){
				
				 $scope.Product = [{
                id: 1000,
                name: "iPhone8",
                numss: 1,
                price: 8888,
                state:false
            }, {
                id: 1001,
                name: "iPhone9",
                numss: 1,
                price: 9888,
                state:false

            }, {
                id: 1002,
                name: "iPhone 2s",
                numss: 1,
                price: 3888,
                state:false
            }, {
                id: 1003,
                name: "iPhone 7P+",
                numss: 1,
                price: 10088,
                state:false
            }];
				
				$scope.jian = function($index){
					if($scope.Product[index].numss>=1){
						$scope.Product[index].numss--;
					}else{
						
					}
				}
				
				$scope.add = function(index){
					$scope.Product[index].numss++;
				}
				
				$scope.remove = function(index){
					if(confirm("确定删除吗?")){
						$scope.Product.splice(index,1);
					}
				}
				
				$scope.totalPrices = function(){
					var totalPrices = 0;
					for(var x = 0;x < $scope.Product.length;x++){
						totalPrices+=$scope.Product[x].numss*$scope.Product[x].price;
					}
					return totalPrices;
				}
				
				$scope.removeAll = function(){
					$scope.Product = [];
				}
				
				$scope.numAll = function(){
					var totalNum = 0;
					
					for(var x = 0;x<$scope.Product.length;x++){
						totalNum+=$scope.Product[x].numss;
					}
					return totalNum;
				}
				
				$scope.deleteAll = function(){
            	var arr =[];
            	//循环数组
            	for (var x =0;x<$scope.Product.length;x++) {

            		if($scope.Product[x].state){
            			
            			arr.push($scope.Product[x].name);
            		}
            		
            	}
            	

            	if(arr.length<=0){
            		confirm("请您选中之后再进行删除");
            	}else{

            		for (index in arr) {
            			for (index1 in $scope.Product) {
            				
            				if(arr[index]==$scope.Product[index1].name){
            					$scope.Product.splice(index1,1);
            					}
            				}
            			}
            		
            		}
            	
            	}
					
				
				$scope.add3 = function(){
					if($scope.ID == "" || $scope.ID == null){
						alert("商品编号不能为空");
						
						return;
					}
					
					if(isNaN($scope.ID)){
						alert("商品编号必须为数字");
						
						return;
					}
					$scope.Product.push({
						id:$scope.ID,
						name:$scope.IDname,
						numss:$scope.IDnum,
						price:$scope.IDprice
					});
				}
				
				
				$scope.updateShow = false;
				var updateID = "";
				var updateName = "";
				var updateNum = "";
				var updatePrice = "";
				
				$scope.xiougai = function(index){
					if(confirm("确定要修改吗?")){
						$scope.updateShow = true;
						
						$scope.updateId = $scope.Product[index].id;
						$scope.updateName = $scope.Product[index].name;
						$scope.updateNum = $scope.Product[index].numss;
						$scope.updatePrice = $scope.Product[index].price;
					}
				}
					
					$scope.updateSub = function(){
						for(index in $scope.Product){
							if($scope.updateId == $scope.Product[index].id){
								$scope.Product[index].name=$scope.updateName;
								$scope.Product[index].numss=$scope.updateNum;
								$scope.Product[index].price=$scope.updatePrice;
								$scope.updateShow = false;
							}
						}
					}
					
			});
		</script>
	</body>
</html>