<!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>
angularJs http网络请求数据实现简单增删改查
最新推荐文章于 2018-07-27 17:38:23 发布