AngularJS网络请求数据+数据格式转换+批量删除

最新推荐文章于 2021-01-20 13:51:01 发布

Aigi_ZJ

最新推荐文章于 2021-01-20 13:51:01 发布

阅读量197

点赞数 1

本文链接：https://blog.csdn.net/Aigi_ZJ/article/details/79100622

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/angular.js" ></script>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope,$http){
				$http({
					method:"GET",
					url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
				}).success(function(data){
					$scope.datas = data ;
					//console.log($scope.datas);
				}).error(function(data){
				});
				
				$scope.today = new Date().getTime();
				
				//删除
				$scope.wucaozuo = false ;
				$scope.delateShow = true ;
				$scope.delFun = function(index){
					if(window.confirm("确认要删除吗？")){
						$scope.datas.splice(index,1);
						alert("删除成功！");
						if($scope.datas.length<=0){
							$scope.delateShow = false ;
							$scope.wucaozuo = true ;
							alert("没了没了没了")
						}
					}else{
						alert("您已经取消了删除！");
					}
				}
				
				
				//全选和反选
				$scope.selectAll = false ;
				$scope.selectAllFun = function(){
					if($scope.selectAll){
						for(index in $scope.datas){
							$scope.datas[index].state = true ;
						}
					}else{
						for(index in $scope.datas){
							$scope.datas[index].state = false ;
						}
					}
				}
				
				
				//批量删除
				$scope.delSelect = function(){
					var arr = [];
					for(index in $scope.datas){
						if($scope.datas[index].state){
							arr.push($scope.datas[index].name);
						}
					}
					
					//如果一个没选，则提示请选择
					if(arr.length<=0){
						alert("请重新选择");
					}else{
						if(window.confirm("确认删除吗？")){  
                        for(index in arr){  
                            for(index2 in $scope.datas){  
                                if(arr[index] == $scope.datas[index2].name){  
                                    $scope.datas.splice(index2,1);  
                                }  
                            }  
                        }  
                    }else{  
                        alert("您已经取消删除");  
                    }  
                }  
            }  
				
				
				
				
				
				
				
				
				
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<input type="text" placeholder="根据姓名模糊查询..." ng-model="selectNames" />    
			<input type="text" placeholder="根据部门模糊查询..." ng-model="selectParts" />    
			<select ng-model="orderMoney">
				<option value="salary">按照薪资排序</option>
			</select>    
				<input type="button" value="批量删除" ng-click="delSelect()" /><br /><br />
				
				<h1 ng-show="wucaozuo">无操作数据</h1>
				<table border="1px" cellpadding="0" cellspacing="0" ng-show="delateShow">
					<thead>
						<tr align="center" style="background-color: #DCDCDC;">
							<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </td>
							<td width="100px">员工姓名</td>
							<td width="100px">员工年龄</td>
							<td width="100px">员工性别</td>
							<td width="100px">员工薪资</td>
							<td width="200px">员工出生日期</td>
							<td width="200px">部门名称</td>
							<td width="100px">删除</td>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="a in datas | filter: {name:selectNames} | filter: {name:selectParts}
							           | orderBy:orderMoney" class="{{$even ? 'css1' : 'css2'}}" align="center">
							<td><input type="checkbox" ng-model="a.state"</td>           
							<td>{{a.name}}</td>
							<td>{{ (today | date:'y') - (a.birthday | date:'y') }}</td>
							<td>{{a.gender}}</td>
							<td>{{a.salary | currency:'￥'}}</td>
							<td>{{a.birthday | date : format : timezone}}</td>
							<td>{{a.department.name}}</td>
							<td><input type="button" value="删除" ng-model="delate" ng-click="delFun($index)" /> </td>
						</tr>
					</tbody>
				</table>
			</select>
		</center>
	</body>
</html>

Aigi_ZJ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS网络请求数据+数据格式转换+批量删除

var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope,$http){ $http({ method:"GET", url:"http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f9
复制链接

扫一扫