angularJs http网络请求数据实现简单增删改查

<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title>嗯嗯啊</title>
		<script src="lib/angular.min.js"></script>


	</head>


	<body ng-app="myApp" ng-controller="myCtrl">


		<input type="text" placeholder="根据姓名模糊查询" ng-model="selname" /> <input type="text" placeholder="根据部门模糊查询" ng-model="selbm" />
		<select ng-model="selsalary">
			<option value="+salary">根据薪资排序</option>
			<option value="-salary">根据-薪资排序</option>
		</select>
		<button ng-click="pl()">批量删除</button>
		<br />
		<table border="1px" cellspacing="0px">
			<tr>
				<td><input type="checkbox" ng-model="selcheck" /> </td>
				<td>员工姓名</td>
				<td>员工年龄</td>
				<td>员工性别</td>
				<td>员工薪资</td>
				<td>出生日期</td>
				<td>部门名称</td>
				<td>删除</td>


			</tr>


			<tr ng-repeat="x in datas| filter:{name:selname} |orderBy:selsalary | filter:selbm">
				<td><input type="checkbox" ng-checked="selcheck" ng-model="x.state" /> </td>
				<td>{{x.name}}</td>
				<td>{{Age(x.birthday)}}</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 ng-click="remove($index)">删除</button></td>


			</tr>


		</table>


		<script>
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope, $http) {


				$scope.Age = function(bir) {
					var bir = new Date(bir).getYear();
					var nowb = new Date().getYear();


					return nowb - bir;
				}


				$scope.pl = function() {
					//批量删除


					var arrs = [];
					for(var x = 0; x < $scope.datas.length; x++) {
						if($scope.datas[x].state) {
							arrs.push($scope.datas[x].name);
						}
					}
					if(arrs.length <= 0) {
						alert("请您选中你要删除的数据")


					} else {
						//开始删除


						for(var x = 0; x < arrs.length; x++) {


							for(var x2 = 0; x2 < $scope.datas.length; x2++) {


								if(arrs[x] == $scope.datas[x2].name) {
									//删除
									$scope.datas.splice(x2, 1);
								}


							}


						}


					}


				}


				$scope.remove = function(index) {
					if(confirm("确定删除?")) {


						$scope.datas.splice(index, 1);


					}


				}


				$http({
					method: "GET",


					url: "http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid"
				}).success(function(data) {


					$scope.datas = data;


				}).error(function(data) {


				});


			});
		</script>


	</body>


</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值