获取网络数据增删

最新推荐文章于 2023-06-13 20:01:09 发布

sui_yz

最新推荐文章于 2023-06-13 20:01:09 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/79092371

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			label{
				display: block;
			}
			
			span{
				color: red;
			}
		</style>
		<script>
			angular.module("gaoynapp", [])
				.controller("con", function($scope, $http) {
					
					$scope.depars=[{id:1,name:'研发部'},{id:2,name:'市场部'}];
					
					$scope.add_sex='男';
					
					
					
					$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
						.success(function(a) {
							$scope.persons = a; //a===>http://接口地址 返回的数据自动参数a
						})
							
						
					//计算年龄的函数
					$scope.getAge = function(birth) {
						//
						var y = new Date(birth).getYear(); //每个对象年龄

						var nowy = new Date().getYear();

						return nowy - y;
					}

					$scope.del = function(id) {
						var f = confirm("确定删除?");
						if(f) {  //如果点击了确定
							//根据id查找所在索引,根据索引进行删除
							for(var i in $scope.persons) {
								if($scope.persons[i].id == id) {
									$scope.persons.splice(i, 1);
								}
							}
						}
					}
					
					//存放删除数据
					
					
					//控制是否选择
					$scope.ckall=function(){
						console.log($scope.persons,"===");
						for(var i in $scope.persons){
							$scope.persons[i].ck=$scope.flag;
							
						}
					}
					
					//批量删除
					$scope.delall=function(){
						//批量删除,必须使用for循环,不能使用for in循环
						confirm("")
						
						for(var i=0;i<$scope.persons.length;i++){
							if($scope.persons[i].ck==true ){ //判断当前行是否勾选
								$scope.persons.splice(i,1); //删除
								i--; //删除时,从当前删除的索引开始
							}
						}
					}
					
					//
					$scope.selBM=function(dname){
						//如果查询部门的输入框没有输入内容,查询所有
						if($scope.cxbm==undefined || $scope.cxbm==""){
							return true;
						}
						
						
						//模糊查询,查找部门名称中是否含有  输入框输入的内容
						if(dname.indexOf($scope.cxbm)>-1){
							return true;
						}
						
						return false;
					}
					
					
					$scope.save=function(){
						
						$scope.errors=[];  //存放错误信息
						
						//判断姓名是否合法
						if($scope.add_uname==undefined || $scope.add_uname==""){
							$scope.val_uname=true;
							$scope.errors.push(1);
						}else{
							$scope.val_uname=false;
						}
						
						//判断工资是否输入
						if($scope.add_salar==undefined || $scope.add_salar==""){
							$scope.val_salar=true;
							$scope.errors.push(2);
						}else{
							$scope.val_salar=false;
						}
						
						var obj_dep;
						if($scope.add_depart==undefined||$scope.add_depart==""){
							$scope. val_depart=true;
							$scope.errors.push(3);
						}else{
							//获取部门的名字
							console.log("部门名字",$scope.add_depart);
							
							for(var i in $scope.depars){
								if($scope.depars[i].name==$scope.add_depart){
									obj_dep=$scope.depars[i];
								}
							}
						}
						
						
						if($scope.errors.length==0){
						//添加
						$scope.persons.push(
							{
								salary:$scope.add_salar,
								birthday:755884805251,
								department:obj_dep,
								gender:$scope.add_sex,
								id:$scope.persons.length+100,
								name:$scope.add_uname
							}
						);
						
						//添加完毕后,清空输入框输入内容
						$scope.add_uname="";
						$scope.add_salar="";
						
						 $scope.show_add=false;
						
						}
						
						
						
					}

				})
		</script>
	</head>
	<body ng-app="gaoynapp" ng-controller="con">
		<h2 ng-show="persons.length==0">
			当前页面为空
		</h2>
		
		<div ng-show="persons.length!=0">
		<input type="text" placeholder="根据部门模糊查询..."  ng-model="cxbm" />
		<button ng-click="delall()">批量删除</button>
		<button ng-click="show_add=true">添加</button>
		
		
		<table border="1px">
			<tr>
				<td>
					<input type="checkbox" ng-model="flag" ng-click="ckall()"  />
				</td>
			</tr>
			<tr ng-repeat="d in persons|orderBy:'-birthday'" ng-show="selBM(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.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
				<td>{{d.department.name}}</td>
				<td><button ng-click="del(d.id)">删除</button></td>
			</tr>
		</table>
		  
		</div>
		<!-- 添加的form表单 -->
		<div ng-show="show_add">
			<label>
				<input type="text" placeholder="请输入用户名" ng-model="add_uname"  /><span ng-show="val_uname">请输入用户名</span>
				
			</label>
			<label>
				<input  placeholder="请输入工资" type="number"  ng-model="add_salar" /><span ng-show="val_salar">请输入工资</span>
			</label>
			
			<label>
				<select ng-model="add_depart">
					<option value="">-请选择所在部门-</option>
					<option>市场部</option>
					<option>研发部</option>
				</select>
				<span ng-show="val_depart">请选择有效部门</span>
			</label>
			
			<label>
				<input type="radio" ng-model="add_sex" value="男" />男
				<input type="radio" ng-model="add_sex"   value="女" />女
			</label>
			<label>
				生日<input type="date" ng-model="add_birth" />
			</label>
			
			<button ng-click="save()">保存</button>
			
		</div>
		
	</body>
</html>

sui_yz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取网络数据增删

label{ display: block; } span{ color: red; } angular.module("gaoynapp", []) .controller("con", function($scope, $http) { $scope.depars=[{id:1,name:'研发部'},{
复制链接

扫一扫