添加显示隐藏

最新推荐文章于 2022-05-24 10:34:58 发布

nijiadalinge

最新推荐文章于 2022-05-24 10:34:58 发布

阅读量192

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79081217

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.da{
				width: 700px;
				height: 900px;
				margin: 0 auto;
			}
			.yi{
				width: 700px;
				height: 30px;
				margin: 0 auto;
			}
			.er{
				width: 700px;
				height: 870px;
				
			}
			span{
				color: red;
			}
			
		</style>
		
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			var app = angular.module("linrenjiang",[]);
			app.controller("conl", function($scope){
				$scope.stus = [{
					id:1,
					name:'刘备',
					pwd : 123456,
					age : 34,
					sex : '男'
				},{
					id:2,
					name:'孙权',
					pwd : 125456,
					age : 32,
					sex : '男'
				},{
					id:3,
					name:'曹操',
					pwd : 123256,
					age : 54,
					sex : '男'
				},{
					id:4,
					name:'孙尚香',
					pwd : 123266,
					age : 24,
					sex : '女'
				},{
					id:5,
					name:'吕布',
					pwd : 113256,
					age : 25,
					sex : '男'
				},{
					id:6,
					name:'小乔',
					pwd : 124456,
					age : 26,
					sex : '女'
				},{
					id:7,
					name:'大乔',
					pwd : 126656,
					age : 34,
					sex : '女'
				},{
					id:8,
					name:'关羽',
					pwd : 133256,
					age : 46,
					sex : '男'
				}];
				
				$scope.add_sex = '男';
				$scope.dele = function(){
					var count = 0;
					for( var i= 0;i<$scope.stus.length;i++){
						if($scope.stus[i].ck){
							count++;
							$scope.stus.splice(i,1);
							i--;
						}
					}
					if(count == 0){
						alert("请至少选择一条！");
					}
				}
				$scope.delAll = function(){
					$scope.stus.splice(0);
				}
				
				$scope.ages=function(a){
					if($scope.aa == undefined ||$scope.aa==""){
						return true;
					}else if(a > $scope.aa.split("-")[0] && a<=$scope.aa.split("-")[1]){
						return true;
					}
					return false;
				
				}
				
				$scope.y_show = false;
				$scope.save = function(){
					var g1= {
						ck : false,
						id : $scope.stus.length + 1,
						name : $scope.add_name,
						pwd : $scope.add_pwd,
						age : $scope.add_age,
						sex : $scope.add_sex
					};
					
					
					if($scope.add_name == "" || $scope.add_name== null) {
						$("#t_name").text("姓名不能为空。");
						$scope.g1.push(1);
					}else{
						$("#t_name").text("");
					}
					
					
					if($scope.add_pwd == "" || $scope.add_pwd == null) {
						$("#t_pwd").text("密码不能为空。");
						$scope.g1.push(1);
					}else{
						$("#t_pwd").text("");
					}
					
					
					if($scope.add_age == "" || $scope.add_age == null) {
						$("#t_age").text("年龄不能为空。");
						$scope.g1.push(1);
					}else{
						$("#t_age").text("");
					}
					
					$scope.stus.push(g1);
					$scope.showsave = false;
				}
				
				
			});
		</script>
	</head>
	<body ng-app="linrenjiang" ng-controller="conl">
		<div class="da">
			
			<div class="yi">
				姓名查找<input type="text" ng-model="selname"placeholder="请输入查找的姓名" />
				
				年龄查找<select ng-model="aa">
					<option>请选择年龄</option>
					<option>0-10</option>
					<option>11-20</option>
					<option>21-30</option>
					<option>31-40</option>
					<option>41-50</option>
					<option>51-60</option>
				</select>
				
				性别查找<select ng-model="selsex">
					<option>请选择性别</option>
					<option>男</option>
					<option>女</option>
				</select>
				
				<button ng-click="delAll()">删除全部</button>
				
				<button ng-click="dele()">批量删除</button>
			</div>
			
			<div class="er">
				<table border="2" cellspacing="0" width="700">
					<tr>
						<th>
							全选<input type="checkbox" ng-click="ckAll()" ng-model="flag"/>
						</th>
						<th>序号</th>
						<th>姓名</th>
						<th>密码</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					
					<tr ng-show="ages(i.age)" ng-repeat="i in stus | filter:{age:selage} | filter:{sex:selsex} | filter:{name:selname}">
						<td>
							<input type="checkbox" ng-model="i.ck" />
						</td>
						<td>{{i.id}}</td>
						<td>{{i.name}}</td>
						<td>
							{{i.pwd}}
						<span ng-show="f">
							<input ng-model="i.pwd" />
							<button ng-click="f=false">保存</button>
						</span>
						</td>
						
						<td>{{i.age}}</td>
						<td>{{i.sex}}</td>
						<td>
							<input type="button" value="修改密码" ng-click="f=true" />
						</td>
					</tr>
				</table>
				
				<div style="width: 700px; height:30px;margin: 0 auto;margin-top: 50px;">
					<button ng-click="showsave = true" style="width: 150px;margin-left: 250px;">添加用户</button>
				</div>
				<div ng-show="showsave" style=" width:350px; height: 300px;margin: 0 auto;">
						<table border="1" width="350">
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input ng-model="add_name" placeholder="请输入姓名" />
									<span id="t_name"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input ng-model="add_pwd" placeholder="请输入密码" />
									<span id="t_pwd"></span>
								</td>
							</tr>
							<tr>
								<td>
									年龄
								</td>
								<td>
									<input ng-model="add_age" placeholder="请输入年龄" />
									<span id="t_age"></span>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" ng-model="add_sex" value="男" />男
									<input type="radio" ng-model="add_sex" value="女" />女
								</td>
							</tr>

						</table>
							<button ng-click="save()" style="margin-left: 100px; width: 100px; margin-top: 50px;">提交</button>
					</div>
				
			</div>
			
		</div>
	</body>
</html>