考题型代码（删除+添加+查找）

最新推荐文章于 2024-06-14 10:12:04 发布
Ason_haiyu
最新推荐文章于 2024-06-14 10:12:04 发布
阅读量448
点赞数
本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79088924
版权
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#sd {
				border-radius: 10px;  /*圆角边框 */
				background-image: url(img/ss.jpg);
				background-position: right;
				background-repeat: no-repeat;
			}
			
			label {
				display: block;
			}
			
			span {
				color: red;
			}
		</style>
		<script src="js/angular.min.js"></script>
		<script>
			angular.module("gaoyn", [])
				.controller("democ", function($scope, $http) {
					$scope. add_sex='男';
					
					
					//$http请求网络上的数据 get():请求指定路径的数据
					$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
						.then(function(d) { //d---->网址返回数据
							// $scope.persons ==>视图中遍历的对象
							$scope.persons = d.data; //json串  根据键获取值   对象.键名
						});
					//每行遍历都会调用getAge  传进来出生日期, 在函数
					$scope.getAge = function(bir) {
						var b = new Date(bir).getYear(); //出生的年份
						var nowb = new Date().getYear();
						return nowb - b;
					}

					$scope.del = function(id) { //js删除 只能根据索引删除
						//根据id查找id所对应索引
						var index = 0;
						for(var i in $scope.persons) {
							if($scope.persons[i].id == id) {
								index = i;
							}
						}

						//弹框确认是否删除
						var f = confirm("确定删除吗?");
						if(f) {
							$scope.persons.splice(index, 1);
						}
					}

					$scope.ckall1 = function() {
						console.log($scope.persons);
						// 遍历数组,让数组的对象状态是否选中----->顶层的复选框
						for(var i in $scope.persons) {
							$scope.persons[i].ck = $scope.ckall;
						}
					}

					$scope.delAll = function() {
						for(var i = 0; i < $scope.persons.length; i++) {
							if($scope.persons[i].ck) { //判断当前行是否被勾选,如果勾选则进行删除操作
								$scope.persons.splice(i, 1); //删除完毕后,下个对象自动移动到当前索引
								i--;

							}
						}
					}

					$scope.getDname = function(dname) { //每行显示之前都自动调用getDname  dname是当前行对应部门名称
						//获取 部门查询输入框 的值 
						if($scope.seldepart == undefined || $scope.seldepart == "") { //判断无条件过滤,使其全部显示
							return true; //return 结束方法的作用
						}

						//dname中 是否含有 输入框输入部分字符     var i=  "我是八维讲师".indexOf("八维");
						if(dname.indexOf($scope.seldepart) > -1) {
							return true;
						}
						return false;
					}

					$scope.save = function() {
						//存放错误提示信息的数组
						$scope.errors = [];

						if($scope.add_uname == undefined || $scope.add_uname == "") {
							$scope.val_uname = true; //val_uname 控制用户名不合法是否显示
							$scope.errors.push(1);
						} else {
							$scope.val_uname = false;
						}
						
						var obj_d;  //部门对象
						if($scope.add_dname==undefined||$scope.add_dname==""){
							$scope.errors.push(4);
						}else{
							/*判断部门所在对象,组装对象 */
							if($scope.add_dname=="市场部"){
								obj_d={id:1,name:$scope.add_dname};	
							}else if($scope.add_dname=="研发部"){
								obj_d={id:2,name:$scope.add_dname};
							}
						}
						
						
						//添加
						if($scope.errors.length == 0) {
							$scope.persons.push({
									"salary": $scope.add_salar,
									"birthday": $scope.add_birth.valueOf(),  //获取date日期的毫秒数
									"department": obj_d,
									"gender": $scope.add_sex,
									"id": $scope.persons.length+100,
									"name": $scope.add_uname 
								}
							);
							console.log($scope.persons)

						}
						
						

					}

				})
		</script>
	</head>

	<body ng-app="gaoyn" ng-controller="democ">
		<!--页面无数据时显示数据 -->
		<h1 ng-show="persons.length==0">
			页面无操作数据
		</h1>

		<!-- 如果有数据则显示table和表头 -->
		<div ng-show="persons.length>0">
			<table border="1px">
				<tr>
					<td colspan="7">
						<input type="checkbox" ng-model="ckall" ng-click="ckall1()" />
						<button ng-click="delAll()">批量删除</button>
						<input id="sd" ng-model="seldepart" placeholder="根据部门模糊查询" />
						<button ng-click="showAdd=true">新增用户</button>
					</td>

				</tr>

				<tr ng-repeat="d in persons|orderBy:'+birthday'" ng-show="getDname(d.department.name)">
					<td><input type="checkbox" ng-model="d.ck" /> </td>
					<td>{{d.name}}</td>
					<td>{{getAge(d.birthday)}}</td>
					<td>{{d.gender}}</td>
					<td>{{d.salary|currency:"¥:"}}</td>
					<td>{{d.department.name}}</td>
					<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td><button ng-click="del(d.id)">删除</button></td>
				</tr>
			</table>

		</div>
		<div ng-show="showAdd">
			<label>
				用户名:<input type="text" ng-model="add_uname" placeholder="请输入用户名" /><span ng-show="val_uname">用户名不合法</span>
			</label>
			<label>
				工资:<input type="number" ng-model="add_salar"   placeholder="请输入工资" /><span ng-show="val_salary">工资不合法</span>
			</label>
			
			<label>
				生日:<input type="date" ng-model="add_birth" />
				
			</label>
			<label>
				性别:
				<input type="radio" ng-model="add_sex" value="男" />男
				
				<input type="radio" ng-model="add_sex" value="女" />女
			</label>
			
			<label>
				<select ng-model="add_dname">
					<option value="">-请选择部门-</option>
					<option>市场部</option>
					<option>研发部</option>
				</select>
			</label>
			
			<button ng-click="save()">保存</button>
		</div>

	</body>

</html>