Angularjs删除和查询

最新推荐文章于 2021-06-19 07:37:17 发布

sakurakbaby

最新推荐文章于 2021-06-19 07:37:17 发布

阅读量247

点赞数

本文链接：https://blog.csdn.net/sakurakbaby/article/details/79105622

版权

<!DOCTYPE html>
<html ng-app="MyApp">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.input{
				border-radius: 20px;
				border: 1 solid black;
				height: 30px;
			}
			#remove1{
				border-radius:10px;
				width: 100px;
				height: 40px;
				background-color: white;
			}
			
			#tab1{
				margin-top: 50px;
			}
			
			#tab2{
				margin-top: 10px;
			}
			
			#tab2 tr:nth-child(even){
				background-color: #EEEEEE;
			}
			
			#but{
				border-radius: 10px;
				border-color: black;
			}
		</style>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app = angular.module("MyApp",[]);
			app.controller("Mycon",function($scope,$http){
				$http({
					method:"GET",
					url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
				}).success(function(data){
					//执行请求成功的代码
					$scope.datas = data;
					console.log(data);
				}).error(function(){
					//执行请求失败的代码
				})
				$scope.date1 = new Date().getTime();
				
				//全选/反选多选框的点击事件
				$scope.cb = function(){
					
					if($scope.ck){//判断当点击全选框时
						for(var i=0;i<$scope.datas.length;i++){
							if($scope.datas[i].state){//当其他复选框为选中状态时
								$scope.datas[i].state = false;//改为不选中状态
							}else{//当其他复选框为不选中状态时
								$scope.datas[i].state = true;//改为选中状态
							}
						}
						
					}else{//判断当不点击全选框时
						for(var i=0;i<$scope.datas.length;i++){
							if($scope.datas[i].state){//当其他复选框为选中状态时
								$scope.datas[i].state = false;//改为不选中状态
							}else{//当其他复选框为不选中状态时
								$scope.datas[i].state = true;//改为选中状态
							}
						}
					}
					
				}
				
				//批量删除的点击事件
				$scope.Pxremove = function(){
					$scope.arr = [];
					
					for(var i=0;i<$scope.datas.length;i++){
						if($scope.datas[i].state){
							$scope.arr.push($scope.datas[i].name);
						}
					}
					if($scope.arr.length<=0){
						alert("请选择一条数据哦");
					}else{
						for(var j=0 ;j<$scope.arr.length;j++){
							for(var i=0;i<$scope.datas.length;i++){
							    if($scope.arr[j]==$scope.datas[i].name){
							    	$scope.datas.splice(i,1);
							    }
							}
						}
					}
				}
				
				//点击删除的事件
				$scope.op = "根据出生日期排序";
				$scope.remove = function(index){
					$scope.datas.splice(index,1);
				}
				
				$scope.sel = function(){
					if($scope.op=="根据出生日期排序"){
						$scope.datas.sort(function(a,b){
							return a.birthday-b.birthday;
						});
					}
					if($scope.op=="根据薪资排序"){
						$scope.datas.sort(function(a,b){
							return a.salary-b.salary;
						});
					}
				}
			});
		</script>
	</head>
	<body ng-controller="Mycon">
		<center>
		<table id="tab1" border="0" cellpadding="6" cellspacing="1">
			<tr>
				<td><input class="input" id="input1" type="text" placeholder="根据姓名模糊查询..." ng-model="name"/></td>
				<td><input class="input" id="input2" type="text" placeholder="根据部门模糊查询..." ng-model="department"/></td>
				<td>
					<select style="height: 30px;" ng-change="sel()" ng-model="op">
						<option>根据出生日期排序</option>
						<option>根据薪资排序</option>
					</select>
				</td>
				<td><button id="remove1" ng-click="Pxremove()">批量删除</button></td>
			</tr>
		</table>
		<table id="tab2" border="1" cellpadding="6" cellspacing="0">
			<tr style="background-color: #999999;">
				<td><input type="checkbox" ng-click="cb()" ng-model="ck" /></td>
				<td>员工姓名</td>
				<td>员工年龄</td>
				<td>员工性别</td>
				<td>员工薪资</td>
				<td>出生日期</td>
				<td>部门名称</td>
				<td>删除</td>
			</tr>
			<tr ng-repeat="x in datas | filter : {name:name} | filter : department">
				<td><input type="checkbox" ng-model="x.state" /></td>
				<td>{{x.name}}</td>
				<td>{{(date1 | date:'yyyy')-(x.birthday | date:'yyyy')}}</td>
				<td>{{x.gender}}</td>
				<td>{{x.salary | currency:'￥'}}</td>
				<td>{{x.birthday | date:'yyyy-MM-dd HH:mm:ss'}}</td><!--把出生日期使用过滤器，变成 年月日时分秒格式-->
				<td>{{x.department.name}}</td>
				<td><button id="but" ng-click="remove($index)">删除</button></td>
			</tr>
		</table>
		</center>
	</body>
</html>
<!---x.birthday-->

sakurakbaby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs删除和查询

html ng-app="MyApp"> head> meta charset="utf-8" /> title>title> style> .input{ border-radius: 20px; border: 1 solid black; height: 30px; } #remove1{ border-radius:10px;
复制链接

扫一扫