html_angular 增删改查+验证 ++

最新推荐文章于 2021-06-19 12:06:02 发布

Cometsinthenightsky

最新推荐文章于 2021-06-19 12:06:02 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/qq_39443545/article/details/79016889

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大工程增删改查</title>
		<script src="js/angular.min.js"></script>
		<script>
			var app = angular.module("anan", []);
			app.controller("enen", function($scope) {
				$scope.user = [{
					ck:false,
					id: 1,
					name: '李1',
					pwd: 123456,
					level: 3
				}, {
					ck:false,
					id: 2,
					name: '李2',
					pwd: 123456,
					level: 1
				}, {
					ck:false,
					id: 3,
					name: '李3',
					pwd: 123456,
					level: 3
				}, {
					ck:false,
					id: 4,
					name: '李4',
					pwd: 123456,
					level: 1
				}, {
					ck:false,
					id: 5,
					name: '李5',
					pwd: 123456,
					level: 2
				}, {ck:false,

					id: 6,
					name: '李6',
					pwd: 123456,
					level: 3
				}, {
					ck:false,
					id: 7,
					name: '李7',
					pwd: 123456,
					level: 2
				}, {
					ck:false,
					id: 8,
					name: '李8',
					pwd: 123456,
					level: 1
				}, {
					ck:false,
					id: 9,
					name: '李9',
					pwd: 123456,
					level: 2
				}, {
					ck:false,
					id: 10,
					name: '李10',
					pwd: 123456,
					level: 1
				}];
				
				$scope.ckAll=function(){
					for(var i=0;i<$scope.user.length;i++){
						$scope.user[i].ck=$scope.flag;
					}
				}
				$scope.delso=function(){
					var shu=0;
					for(var i=0;i<$scope.user.length;i++){
						if($scope.user[i].ck){
							$scope.user.splice(i,1);
							shu++;
							i--;
						}
					}
				}
				$scope.insert=function(m){
					var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel};
					$scope.user.push(good);
				}
			})
		</script>
		<style type="text/css">
			#cll:nth-child(even){
				background-color: lightseagreen;
			}
			#cll:nth-child(odd){
				background-color:#C9C994;
			}
		</style>
	</head>
	<body ng-app="anan" ng-controller="enen">
		<div style="margin: 0 auto; height:800px;  width: 1000px;  border: 1px solid greenyellow; ">
			<input placeholder="用户名搜索" ng-model="souname"/>
			<select ng-model="jb"><option value="">选择级别</option ><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
			　　　　　　　　　　　排序<select ng-model="px"><option>排序</option>	<option value="id">id</option><option value="level">级别</option></select><br/>
			<button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button><button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button>
			<div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
				　id:<input type="number" ng-model="tid"/>　用户名:<input ng-model="tname"/>　密码:<input ng-model="tpwd"/>　级别:<input type="number" ng-model="tlevel"/>　<button  ng-click="insert(m=false)">添加</button>
			</div>
			<table style="width: 1000px;" border="1px">
				<tr style="background-color: cadetblue;">
					<td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td>
					<td>id</td>
					<td>用户名</td>
					<td>密码</td>
					<td>级别</td>
					<td>操作</td>
				</tr>
				<tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}">
					<td><input type="checkbox" ng-model="e.ck"/></td>
					<td>{{e.id}}</td>
					<td>{{e.name}}</td>
					<td><span> {{e.pwd}}</span>
						<span  ng-show="f">	
						<input  ng-model="e.pwd" /> <button  ng-click="f=false">保存</button> 	
					</span></td>
					<td>{{e.level}}</td>
					<td><button ng-click="f=true">修改密码</button></td>
				</tr>
			</table>
		</div>
	</body>
</html>

				// 修改页面 获取数据 并显示在修改页面 保存验证信息并隐藏

				$scope.updateShowFun = function(pro) {
					$scope.updateShow = true;
					$scope.formShow = false;
					$scope.updateId = pro.id;
					$scope.updateName = pro.name;
					$scope.updatePrice = pro.price;
				}
				$scope.updateSub = function() {
					$scope.updateArr = [];
					if($scope.updateName == "" || $scope.updateName == null) {
						$scope.updateArr.push("产品名称为空");
					}
					if($scope.updatePrice == "" || $scope.updatePrice == null) {
						$scope.updateArr.push("产品价格为空");
					} else if(isNaN($scope.updatePrice)) {
						$scope.updateArr.push("产品价格不是整数");
					}
					//验证不满足
					if($scope.updateArr.length > 0) {
						$scope.haha = true;
					} else {
						$scope.haha = false;
						for(index in $scope.products) {
							if(parseInt($scope.updateId) == $scope.products[index].id) {
								$scope.products[index].name = $scope.updateName;
								$scope.products[index].price = $scope.updatePrice;
								$scope.updateShow = false;
							}
						}
					}
				}

				<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
				<h3>修改商品</h3> 商品编号：
				<input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称：
				<input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格：
				<input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
				<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
					<ul>
						<li ng-repeat="chenk in updateArr">{{chenk}}</li>
					</ul>
				</div><br />
				<input type="button" value="提交" ng-click="updateSub()" />
			</form>

Cometsinthenightsky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_angular 增删改查+验证 ++

大工程增删改查 var app = angular.module("anan", []); app.controller("enen", function($scope) { $scope.user = [{ ck:false, id: 1, name: '李1', pwd: 123456, level: 3
复制链接

扫一扫