<!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-->结果图
