Angular JS-实现增删改查

最新推荐文章于 2021-06-19 12:06:02 发布
Aigi_ZJ
最新推荐文章于 2021-06-19 12:06:02 发布
阅读量250
点赞数 1
本文链接：https://blog.csdn.net/Aigi_ZJ/article/details/79081417
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script>
			var app = angular.module("App",[]);
			app.controller("myCtrl",function($scope){
				
				$scope.datas = [{
					id:1001,
					name:"张帅",
					num:1,
					price:6666,
					state:false
				},
				{
					id:1002,
					name:"瘫瘫",
					num:2,
					price:8888,
					state:false
				}
				,
				{
					id:1003,
					name:"张胖子",
					num:3,
					price:9,
					state:false
				}
				];
				
				//减的按钮
				$scope.jian = function(index){
					//最小为1
					if($scope.datas[index].num<=1){
						alert("数量最少为1");
					}else{
						$scope.datas[index].num--;
					}
				}
				
				//加的按钮
				$scope.jia = function(index){
					//最小为1
					$scope.datas[index].num++;
				}
				
				
				//全选和反选
				$scope.selectAll = false ;
				$scope.selectAllFun = function(){
					if($scope.selectAll){
						for(index in $scope.datas){
							$scope.datas[index].state = true ;
						}
					}else{
						for(index in $scope.datas){
							$scope.datas[index].state = false ;
						}
					}
				}
			
			
				//删除单个条目
				$scope.del = function(index){
					$scope.datas.splice(index,1);
				}
				
				//批量删除--定义一个空的数组，将.state为true的(即被选中的)名字放到数组中
				$scope.delSelctFun = function(){
					var arr = [];
					//遍历数组，然后看是谁被选中
					for(index in $scope.datas){
						//判断如果被选中--即state状态为true
						if($scope.datas[index].state){
							//就将被选中状态的姓名存入空的数组中
							arr.push($scope.datas[index].name);
						}
					}
				
				
				//如果一个都没有选中，则arr的长度为0，如果一个没选中，则提示需要选择
				if(arr.length<=0){
					alert("请重新选择");
				}else{
					if(window.confirm("确认删除吗？")){
						for(index in arr){
							for(index2 in $scope.datas){
								if(arr[index] == $scope.datas[index2].name){
									$scope.datas.splice(index2,1);
								}
							}
						}
					}else{
						alert("您已经取消删除");
					}
				}
			}
				
				//总价格
				$scope.prices = function(){
					var p = 0 ;
					//循环相加
					for(var x = 0 ; x < $scope.datas.length ; x++){
						p += $scope.datas[x].num*$scope.datas[x].price ;
					}
					return p ;
				}
				
				//总数量
				$scope.content = function(){
					var p = 0 ;
					for(var x = 0 ; x < $scope.datas.length ; x++){
						p += $scope.datas[x].num ;
					}
					return p ;
				}
				
				//添加商品
				$scope.add = function(){
					//验证所填写是否为空
					var flag1 = false ;
					var flag2 = false ;
					var flag3 = false ;
					var flag4 = false ;
					
					//验证编号
					if($scope.tjID == "" || $scope.tjID == null ){
						alert("商品编号不能为空");
						flag1 = false ;
					}else if(isNaN($scope.tjNUM)){
						alert("编号只能为数字");
						flag1 = false ;
					}else {
						flag1 =  true ;
					}
					
					//验证用户名
					if($scope.tjNAME == "" || $scope.tjNAME == null ){
						alert("商品名称不能为空");
						flag2 = false ;
					}else{
						flag2 = true ;
					}
					
					//验证单价不为空且数字
					if($scope.tjPRICE == "" || $scope.tjPRICE == null ){
						alert("商品编号不能为空");
						flag3 = false ;
					}else if(isNaN($scope.tjPRICE)){
						alert("单价只能为数字");
						flag3 = false ;
					}else {
						flag3 =  true ;
					}
					
					//数量为数字
					if(isNaN($scope.tjNUM)){
						alert("数量只能为数字");
						flag4  = false ;
					}else {
						flag4 = true ;
					}
					
					//全部验证通过，提交表单
					if(flag1 && flag2 && flag3 && flag4 ){
						$scope.datas.push({
							id: $scope.tjID,
							name: $scope.tjNAME,
							num: $scope.tjNUM,
							price: $scope.tjPRICE
							
						});
						alert("添加成功");
					}
					
				}
				
				//修改数据
				//修改表格不显示，将其设置为false
				$scope.updateShow = false ;
				
				$scope.xgID = "" ;
				$scope.xgNAME = "" ;
				$scope.xgNUM = "" ;
				$scope.xgPRICE = "" ;
				
				$scope.update = function(aa){
					if(window.confirm("确定要修改吗？")){
						//确定修改，修改表格显示
						$scope.updateShow = true ;
						$scope.xgID = aa.id ;
						$scope.xgNAME = aa.name ;
						$scope.xgNUM = aa.num ;
						$scope.xgPRICE = aa.price ;
					}else{
						alert("您取消了修改");
					}
				}
				
				//修改数值，并且将其赋值给数据
				$scope.updateSub = function(){
					//验证所填写是否为空
					var flag1 = false ;
					var flag2 = false ;
					var flag3 = false ;
					var flag4 = false ;
					
					//验证编号
					if($scope.xgID == "" || $scope.xgID == null ){
						alert("商品编号不能为空");
						flag1 = false ;
					}else if(isNaN($scope.xgID)){
						alert("编号只能为数字");
						flag1 = false ;
					}else {
						flag1 =  true ;
					}
					
					//验证用户名
					if($scope.xgNAME == "" || $scope.xgNAME == null ){
						alert("商品名称不能为空");
						flag2 = false ;
					}else{
						flag2 = true ;
					}
					
					//验证单价不为空且数字
					if($scope.xgPRICE == "" || $scope.xgPRICE == null ){
						alert("商品编号不能为空");
						flag3 = false ;
					}else if(isNaN($scope.xgPRICE)){
						alert("单价只能为数字");
						flag3 = false ;
					}else {
						flag3 =  true ;
					}
					
					//数量为数字
					if(isNaN($scope.xgNUM)){
						alert("数量只能为数字");
						flag4  = false ;
					}else {
						flag4 = true ;
					}
					
					//全部验证通过，提交表单
					if(flag1 && flag2 && flag3 && flag4 ){
						//遍历数据将其赋值
						for(index in $scope.datas){
							if($scope.xgID == $scope.datas[index].id){
								$scope.datas[index].name = $scope.xgNAME ;
								$scope.datas[index].num = $scope.xgNUM ;
								$scope.datas[index].price = $scope.xgPRICE ;
							}
						}
						alert("修改成功");
					}
				}
				
				
				
				
				
		});
		</script>
		
		<style>
			.css1{
				background-color: hotpink;
			}
			
			.css2{
				background-color: pink;
			}
		</style>
		
		
	</head>
	<body ng-app="App" ng-controller="myCtrl">
		<center>
			<input type="text" placeholder="请输入要查询的内容" ng-model="search" />  
			数量排序：<select ng-model="selOrder" >
				<option value="num" >数量正序</option>
				<option value="-num">数量倒序</option>
			</select>  
			<input type="button" value="批量删除" ng-click="delSelctFun()" /><br /><br />
			
			<table border="1px" cellpadding="0" cellspacing="0">
				<thead>
					<tr align="center" style="background-color: #DCDCDC;">
						<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>
						<td width="100px">商品编号</td>
						<td width="100px">商品名称</td>
						<td width="230px">商品数量</td>
						<td width="100px">商品单价</td>
						<td width="100px">商品总价</td>
						<td width="110px">商品操作</td>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="a in datas | filter: {name:search} | orderBy:selOrder" class="{{ $even ? 'css1' : 'css2'}}" align="center">
						<td><input type="checkbox" ng-model="a.state"</td> 
						<td>{{a.id}}</td>
						<td>{{a.name}}</td>
						<td>
							<button ng-click="jian($index)">-</button>
							<input type="number" ng-model="a.num" />
							<button ng-click="jia($index)">+</button>
						</td>
						<td>{{a.price}}</td>
						<td>{{a.price*a.num}}</td>
						<td>
							<button  ng-click="del($index)" class="sb">删除</button>  
							<button ng-click="update(a)" class="sb">修改</button>
						</td>
					</tr>
				</tbody>
			</table>
			<h3>总金额：{{prices()}}         总数量：{{content()}}</h3>
			<br /><br />
			
			<form style="border: 1px solid yellow; width: 300px;" >
				<h3>添加商品</h3>
				商品编号：<input type="text" ng-model="tjID" /><br /><br />
				商品名称：<input type="text" ng-model="tjNAME" /><br /><br />
				商品数量：<input type="number" ng-model="tjNUM" /><br /><br />
				商品单价：<input type="text" ng-model="tjPRICE" /><br /><br />
				<input type="button" ng-click="add()" align="center" value="提交"  ng-model="add"/>
			</form>
			<br /><br />
			<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
				<h3>修改商品</h3>
				商品编号：<input type="text" ng-model="xgID" disabled="disabled"/><br /><br />
				商品名称：<input type="text" ng-model="xgNAME" /><br /><br />
				商品数量：<input type="number" ng-model="xgNUM" /><br /><br />
				商品单价：<input type="text" ng-model="xgPRICE" /><br /><br />
				<input type="button" ng-click="updateSub()" align="center" value="修改"  ng-model="update"/>
			</form>
		</center>
	</body>
</html>
Aigi_ZJ
关注
1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular JS-实现增删改查

var app = angular.module("App",[]); app.controller("myCtrl",function($scope){ $scope.datas = [{ id:1001, name:"张帅", num:1, price:6666, state:false }, {
复制链接

扫一扫