<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
thead{
background: #696969;
}
tbody tr:nth-child(2n){
background: #A9A9A9;
}
span{
color: red;
}
.span{
color: black;
}
</style>
<script src="js/angular.min.js"></script>
<script>
angular.module("zyapp",[]).controller("demoa",function($scope,$http){
$scope.f = false;
$scope.add_sex='男';
//$http请求网络数据 get("请求指定路径的数据")
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(p){//d网址返回的数据
$scope.persons=p.data;
});
//算年龄
$scope.getage = function(bir){
//获取员工的出生日期
var p_bth = new Date(bir).getYear();
//获取现在的日期
var n_bth = new Date().getYear();
return n_bth-p_bth;
}
//删除
$scope.del = function(id){
var index = 0;
for (var i in $scope.persons) {
if($scope.persons[i].id==id){
index=i;
}
}
var t = confirm("确定删除吗?")
if(t){
$scope.persons.splice(i,1);
}
}
//全选
$scope.ckAll = function(){
for (var i in $scope.persons) {
$scope.persons[i].ck = $scope.flag;
}
}
$scope.delAll = function(){
for (var i=0;i<$scope.persons.length;i++) {
if($scope.persons[i].ck==true){
$scope.persons.splice(i,1);
i--;
}
}
}
//根据部门查询
$scope.selbm = function(bname){
if($scope.cxbm==undefined||$scope.cxbm==""){
return true;
}
if(bname.indexOf($scope.cxbm)>-1){
return true;
}else{
return false;
}
}
$scope.add = function(){
//存放错误信息的数组
$scope.errors=[];
//判断是否可以添加
if($scope.add_name==undefined||$scope.add_name==""){
$scope.v_name = true;
$scope.errors.push(8);
}else{
$scope.v_name=false;
}
if($scope.add_salary==undefined||$scope.add_salary==""){
$scope.v_salary = true;
$scope.errors.push(9);
}else{
$scope.v_salary=false;
}
if($scope.add_birthday==undefined||$scope.add_birthday==""){
$scope.v_birthday = true;
$scope.errors.push(90);
}else{
$scope.v_birthday=false;
}
if($scope.add_bmname==undefined||$scope.add_bmname==""){
$scope.v_bmname = true;
$scope.errors.push(98);
}else{
$scope.v_bmname=false;
}
//部门对象
var obj_b;
if($scope.add_bmname==undefined||$scope.add_bmname==""){
$scope.errors.push(1);
}else{
//判断部门所在对象,重新组装
if($scope.add_bmname=='市场部'){
obj_b={id:1,name:$scope.add_bmname};
}else if($scope.add_bmname=='研发部'){
obj_b={id:2,name:$scope.add_bmname};
}
}
//判断添加
if($scope.errors.length==0){
$scope.persons.push({
"birthday": $scope.add_birthday,
"department": obj_b,
"gender": $scope.add_sex,
"id": $scope.persons.length+50,
"name": $scope.add_name,
"salary": $scope.add_salary
})
$scope.formshow=false;
}
}
})
</script>
</head>
<body ng-app="zyapp" ng-controller="demoa">
<h2 ng-show="persons.length==0">页面无数据操作</h2>
<div ng-show="persons.length>0">
<input ng-model="vname" type="text" placeholder="根据姓名模糊查询" style="border-radius: 50px; border-color: black;"/>
<input ng-model="cxbm" type="text" placeholder="根据部门模糊查询" style="border-radius: 50px; border-color: black;"/>
<select ng-model="px">
<option value="">排序</option>
<option value="-salary">工资由高到低</option>
<option value="+salary">工资由低到高</option>
<option value="+birthday">年龄由高到低</option>
<option value="-birthday">年龄由低到高</option>
</select>
<button ng-click="delAll()">批量删除</button>
<button ng-click="formshow=true">添加员工</button>
<br /><br />
<table border="1" style="text-align: center;">
<thead>
<tr>
<td> <input type="checkbox" ng-model="flag" ng-click="ckAll()"/> </td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工工资</td>
<td>出生日期</td>
<td>员工部门</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons|filter:{name:vname}|orderBy:px" ng-show="selbm(p.department.name)">
<td> <input type="checkbox" ng-model="p.ck"/> </td>
<td >
<span class="span" ng-hide="f">{{p.name}}</span>
<span class="span" ng-show="f">
<input ng-model="p.name"/>
</span>
</td>
<td>{{getage(p.birthday)}}</td>
<td>{{p.gender}}</td>
<td>{{p.salary|currency:"¥:"}}</td>
<td>{{p.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{p.department.name}}</td>
<td> <button ng-click="del(p.id)">删除</button>
<button ng-click="f=!f">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="formshow">
员工姓名:<input type="text" ng-model="add_name"/> <span ng-show="v_name">员工姓名填写错误</span> <br />
员工薪资:<input type="number" ng-model="add_salary"/><span ng-show="v_salary">请填写员工薪资</span> <br />
性别:<input type="radio" value="男" ng-model="add_sex"/>男
<input type="radio" value="女" ng-model="add_sex"/>女<br />
出生日期:<input type="date" ng-model="add_birthday"/><span ng-show="v_birthday">日期格式错误</span> <br />
部门:<select ng-model="add_bmname">
<option value="">请选择</option>
<option>市场部</option>
<option>研发部</option>
</select><span ng-show="v_bmname">请选择所属部门</span><br />
<button ng-click="add()">保存</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
thead{
background: #696969;
}
tbody tr:nth-child(2n){
background: #A9A9A9;
}
span{
color: red;
}
.span{
color: black;
}
</style>
<script src="js/angular.min.js"></script>
<script>
angular.module("zyapp",[]).controller("demoa",function($scope,$http){
$scope.f = false;
$scope.add_sex='男';
//$http请求网络数据 get("请求指定路径的数据")
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(p){//d网址返回的数据
$scope.persons=p.data;
});
//算年龄
$scope.getage = function(bir){
//获取员工的出生日期
var p_bth = new Date(bir).getYear();
//获取现在的日期
var n_bth = new Date().getYear();
return n_bth-p_bth;
}
//删除
$scope.del = function(id){
var index = 0;
for (var i in $scope.persons) {
if($scope.persons[i].id==id){
index=i;
}
}
var t = confirm("确定删除吗?")
if(t){
$scope.persons.splice(i,1);
}
}
//全选
$scope.ckAll = function(){
for (var i in $scope.persons) {
$scope.persons[i].ck = $scope.flag;
}
}
$scope.delAll = function(){
for (var i=0;i<$scope.persons.length;i++) {
if($scope.persons[i].ck==true){
$scope.persons.splice(i,1);
i--;
}
}
}
//根据部门查询
$scope.selbm = function(bname){
if($scope.cxbm==undefined||$scope.cxbm==""){
return true;
}
if(bname.indexOf($scope.cxbm)>-1){
return true;
}else{
return false;
}
}
$scope.add = function(){
//存放错误信息的数组
$scope.errors=[];
//判断是否可以添加
if($scope.add_name==undefined||$scope.add_name==""){
$scope.v_name = true;
$scope.errors.push(8);
}else{
$scope.v_name=false;
}
if($scope.add_salary==undefined||$scope.add_salary==""){
$scope.v_salary = true;
$scope.errors.push(9);
}else{
$scope.v_salary=false;
}
if($scope.add_birthday==undefined||$scope.add_birthday==""){
$scope.v_birthday = true;
$scope.errors.push(90);
}else{
$scope.v_birthday=false;
}
if($scope.add_bmname==undefined||$scope.add_bmname==""){
$scope.v_bmname = true;
$scope.errors.push(98);
}else{
$scope.v_bmname=false;
}
//部门对象
var obj_b;
if($scope.add_bmname==undefined||$scope.add_bmname==""){
$scope.errors.push(1);
}else{
//判断部门所在对象,重新组装
if($scope.add_bmname=='市场部'){
obj_b={id:1,name:$scope.add_bmname};
}else if($scope.add_bmname=='研发部'){
obj_b={id:2,name:$scope.add_bmname};
}
}
//判断添加
if($scope.errors.length==0){
$scope.persons.push({
"birthday": $scope.add_birthday,
"department": obj_b,
"gender": $scope.add_sex,
"id": $scope.persons.length+50,
"name": $scope.add_name,
"salary": $scope.add_salary
})
$scope.formshow=false;
}
}
})
</script>
</head>
<body ng-app="zyapp" ng-controller="demoa">
<h2 ng-show="persons.length==0">页面无数据操作</h2>
<div ng-show="persons.length>0">
<input ng-model="vname" type="text" placeholder="根据姓名模糊查询" style="border-radius: 50px; border-color: black;"/>
<input ng-model="cxbm" type="text" placeholder="根据部门模糊查询" style="border-radius: 50px; border-color: black;"/>
<select ng-model="px">
<option value="">排序</option>
<option value="-salary">工资由高到低</option>
<option value="+salary">工资由低到高</option>
<option value="+birthday">年龄由高到低</option>
<option value="-birthday">年龄由低到高</option>
</select>
<button ng-click="delAll()">批量删除</button>
<button ng-click="formshow=true">添加员工</button>
<br /><br />
<table border="1" style="text-align: center;">
<thead>
<tr>
<td> <input type="checkbox" ng-model="flag" ng-click="ckAll()"/> </td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工工资</td>
<td>出生日期</td>
<td>员工部门</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons|filter:{name:vname}|orderBy:px" ng-show="selbm(p.department.name)">
<td> <input type="checkbox" ng-model="p.ck"/> </td>
<td >
<span class="span" ng-hide="f">{{p.name}}</span>
<span class="span" ng-show="f">
<input ng-model="p.name"/>
</span>
</td>
<td>{{getage(p.birthday)}}</td>
<td>{{p.gender}}</td>
<td>{{p.salary|currency:"¥:"}}</td>
<td>{{p.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{p.department.name}}</td>
<td> <button ng-click="del(p.id)">删除</button>
<button ng-click="f=!f">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="formshow">
员工姓名:<input type="text" ng-model="add_name"/> <span ng-show="v_name">员工姓名填写错误</span> <br />
员工薪资:<input type="number" ng-model="add_salary"/><span ng-show="v_salary">请填写员工薪资</span> <br />
性别:<input type="radio" value="男" ng-model="add_sex"/>男
<input type="radio" value="女" ng-model="add_sex"/>女<br />
出生日期:<input type="date" ng-model="add_birthday"/><span ng-show="v_birthday">日期格式错误</span> <br />
部门:<select ng-model="add_bmname">
<option value="">请选择</option>
<option>市场部</option>
<option>研发部</option>
</select><span ng-show="v_bmname">请选择所属部门</span><br />
<button ng-click="add()">保存</button>
</div>
</body>
</html>