<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontr">
<input type="text" placeholder="根据姓名模糊查询.." style="border-radius: 20px;" ng-model="screenname">
<input type="text" placeholder="根据部门模糊查询.." style="border-radius: 20px;" ng-model="screenbm">
<select ng-model="order" ng-change="xiala()">
<option value="">排序</option>
<option value="salary">薪资排序</option>
<option value="birthday">生日排序</option>
</select>
<button ng-click="delectall()">批量删除</button>
<button ng-click="addshow=true">新增员工</button>
<h1 ng-show="pshow">无数据操作</h1>
<table border="1" cellpadding="10" cellspacing="0" ng-show="tabshow">
<tr>
<td><input type="checkbox" ng-click="selectallfun()" ng-model="selectall"></td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工薪资</td>
<td>出生日期</td>
<td>部门名称</td>
<td>操作</td>
</tr>
<tr ng-repeat="per in person | filter:{name:screenname} | orderBy:(flag+clumn)" ng-show="show(per.department.name)">
<td><input type="checkbox" ng-model="per.state"></td>
<td>{{per.name}}</td>
<td>{{getage(per.birthday)}}</td>
<td>{{per.gender}}</td>
<td>{{per.salary | currency:"￥"}}</td>
<td>{{per.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{per.department.name}}</td>
<td><button ng-click="delect(per.id)">删除</button></td>
</tr>
</table>
<div ng-show="addshow">
员工姓名:<input type="text" ng-model="add_name"><b ng-show="showb1">员工姓名不能为空</b><br>
员工薪资:<input type="text" ng-model="add_salary"><b ng-show="showb2">员工薪资不能为空</b><br>
出生日期:<input type="date" ng-model="add_birthday"><b ng-show="showb3">出生日期不能为空</b><br>
员工性别:
<select ng-model="add_gender">
<option value="">选择性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select><b ng-show="showb4">员工性别必须选择</b>
<br>
部门名称:
<select ng-model="add_department">
<option value="">选择部门</option>
<option value="市场部">市场部</option>
<option value="研发部">研发部</option>
</select><b ng-show="showb5">员工部门必须选择</b><br>
<button ng-click="save()">保存</button>
</div>
</body>
<script>
var app = angular.module("myapp", []);
app.controller("mycontr", function($scope, $http) {
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(data) {
$scope.person = data;
})
$scope.tabshow = true;
$scope.getage = function(age) {
var a = new Date(age).getYear();
var b = new Date().getYear();
return b - a;
}
//名字查询
$scope.screenname = "";
//名称查询
$scope.screenbm = "";
$scope.show = function(name) {
if(name.indexOf($scope.screenbm) == -1) {
return false;
} else {
return true;
}
}
//排序
$scope.xiala = function() {
if($scope.order == "salary") {
$scope.flag = "";
$scope.clumn = "salary";
}
if($scope.order == "birthday") {
$scope.flag = "-";
$scope.clumn = "birthday";
}
if($scope.order == "") {
$scope.flag = "";
$scope.clumn = "birthday";
}
}
//删除
$scope.delect = function(clumn) {
for(index in $scope.person) {
if($scope.person[index].id == clumn) {
$scope.person.splice(index, 1);
}
}
}
//全选
$scope.selectallfun = function() {
for(index in $scope.person) {
$scope.person[index].state = $scope.selectall;
}
}
//批量删除
$scope.delectall = function() {
var v = confirm("确定要删除吗");
if(v == true) {
var arr = [];
for(index in $scope.person) {
if($scope.person[index].state) {
arr.push($scope.person[index]);
}
}
for(index1 in arr) {
for(index2 in $scope.person) {
if(arr[index1] == $scope.person[index2]) {
$scope.person.splice(index2, 1);
}
}
}
if($scope.person.length == 0){
$scope.tabshow = false;
$scope.pshow = true;
}
}
}
//增加员工
$scope.save = function(){
var obj_bm;
var a1=a2=a3=a4=a5=false;
if($scope.add_department=="市场部"){
obj_bm={id:1,name:$scope.add_department};
}else if($scope.add_department=="研发部"){
obj_bm={id:2,name:$scope.add_department};
}
if($scope.add_name == "" || $scope.add_name == undefined){
$scope.showb1 = true;
a1=false;
}else{
$scope.showb1 = false;
a1=true;
}
if($scope.add_gender == "" || $scope.add_gender == undefined){
$scope.showb2 = true;
a2=false;
}else{
$scope.showb2 = false;
a2=true;
}
if($scope.add_salary == "" || $scope.add_salary == undefined){
$scope.showb3 = true;
a3=false;
}else{
$scope.showb3 = false;
a3=true;
}
if($scope.add_birthday == "" || $scope.add_birthday == undefined){
$scope.showb4 = true;
a4=false;
}else{
$scope.showb4 = false;
a4=true;
}
if($scope.add_department == "" || $scope.add_department == undefined){
$scope.showb5 = true;
a5=false;
}else{
$scope.showb5 = false;
a5=true;
}
if(a1&&a2&&a3&&a4&&a5==true){
var arr = {
name:$scope.add_name,
gender:$scope.add_gender,
salary:$scope.add_salary,
birthday:$scope.add_birthday,
department:obj_bm
};
$scope.person.push(arr);
$scope.add_name = "";
$scope.add_gender = "";
$scope.add_salary = "";
$scope.add_birthday = "";
$scope.add_department = "";
$scope.addshow = false;
}
}
});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontr">
<input type="text" placeholder="根据姓名模糊查询.." style="border-radius: 20px;" ng-model="screenname">
<input type="text" placeholder="根据部门模糊查询.." style="border-radius: 20px;" ng-model="screenbm">
<select ng-model="order" ng-change="xiala()">
<option value="">排序</option>
<option value="salary">薪资排序</option>
<option value="birthday">生日排序</option>
</select>
<button ng-click="delectall()">批量删除</button>
<button ng-click="addshow=true">新增员工</button>
<h1 ng-show="pshow">无数据操作</h1>
<table border="1" cellpadding="10" cellspacing="0" ng-show="tabshow">
<tr>
<td><input type="checkbox" ng-click="selectallfun()" ng-model="selectall"></td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工薪资</td>
<td>出生日期</td>
<td>部门名称</td>
<td>操作</td>
</tr>
<tr ng-repeat="per in person | filter:{name:screenname} | orderBy:(flag+clumn)" ng-show="show(per.department.name)">
<td><input type="checkbox" ng-model="per.state"></td>
<td>{{per.name}}</td>
<td>{{getage(per.birthday)}}</td>
<td>{{per.gender}}</td>
<td>{{per.salary | currency:"￥"}}</td>
<td>{{per.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{per.department.name}}</td>
<td><button ng-click="delect(per.id)">删除</button></td>
</tr>
</table>
<div ng-show="addshow">
员工姓名:<input type="text" ng-model="add_name"><b ng-show="showb1">员工姓名不能为空</b><br>
员工薪资:<input type="text" ng-model="add_salary"><b ng-show="showb2">员工薪资不能为空</b><br>
出生日期:<input type="date" ng-model="add_birthday"><b ng-show="showb3">出生日期不能为空</b><br>
员工性别:
<select ng-model="add_gender">
<option value="">选择性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select><b ng-show="showb4">员工性别必须选择</b>
<br>
部门名称:
<select ng-model="add_department">
<option value="">选择部门</option>
<option value="市场部">市场部</option>
<option value="研发部">研发部</option>
</select><b ng-show="showb5">员工部门必须选择</b><br>
<button ng-click="save()">保存</button>
</div>
</body>
<script>
var app = angular.module("myapp", []);
app.controller("mycontr", function($scope, $http) {
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(data) {
$scope.person = data;
})
$scope.tabshow = true;
$scope.getage = function(age) {
var a = new Date(age).getYear();
var b = new Date().getYear();
return b - a;
}
//名字查询
$scope.screenname = "";
//名称查询
$scope.screenbm = "";
$scope.show = function(name) {
if(name.indexOf($scope.screenbm) == -1) {
return false;
} else {
return true;
}
}
//排序
$scope.xiala = function() {
if($scope.order == "salary") {
$scope.flag = "";
$scope.clumn = "salary";
}
if($scope.order == "birthday") {
$scope.flag = "-";
$scope.clumn = "birthday";
}
if($scope.order == "") {
$scope.flag = "";
$scope.clumn = "birthday";
}
}
//删除
$scope.delect = function(clumn) {
for(index in $scope.person) {
if($scope.person[index].id == clumn) {
$scope.person.splice(index, 1);
}
}
}
//全选
$scope.selectallfun = function() {
for(index in $scope.person) {
$scope.person[index].state = $scope.selectall;
}
}
//批量删除
$scope.delectall = function() {
var v = confirm("确定要删除吗");
if(v == true) {
var arr = [];
for(index in $scope.person) {
if($scope.person[index].state) {
arr.push($scope.person[index]);
}
}
for(index1 in arr) {
for(index2 in $scope.person) {
if(arr[index1] == $scope.person[index2]) {
$scope.person.splice(index2, 1);
}
}
}
if($scope.person.length == 0){
$scope.tabshow = false;
$scope.pshow = true;
}
}
}
//增加员工
$scope.save = function(){
var obj_bm;
var a1=a2=a3=a4=a5=false;
if($scope.add_department=="市场部"){
obj_bm={id:1,name:$scope.add_department};
}else if($scope.add_department=="研发部"){
obj_bm={id:2,name:$scope.add_department};
}
if($scope.add_name == "" || $scope.add_name == undefined){
$scope.showb1 = true;
a1=false;
}else{
$scope.showb1 = false;
a1=true;
}
if($scope.add_gender == "" || $scope.add_gender == undefined){
$scope.showb2 = true;
a2=false;
}else{
$scope.showb2 = false;
a2=true;
}
if($scope.add_salary == "" || $scope.add_salary == undefined){
$scope.showb3 = true;
a3=false;
}else{
$scope.showb3 = false;
a3=true;
}
if($scope.add_birthday == "" || $scope.add_birthday == undefined){
$scope.showb4 = true;
a4=false;
}else{
$scope.showb4 = false;
a4=true;
}
if($scope.add_department == "" || $scope.add_department == undefined){
$scope.showb5 = true;
a5=false;
}else{
$scope.showb5 = false;
a5=true;
}
if(a1&&a2&&a3&&a4&&a5==true){
var arr = {
name:$scope.add_name,
gender:$scope.add_gender,
salary:$scope.add_salary,
birthday:$scope.add_birthday,
department:obj_bm
};
$scope.person.push(arr);
$scope.add_name = "";
$scope.add_gender = "";
$scope.add_salary = "";
$scope.add_birthday = "";
$scope.add_department = "";
$scope.addshow = false;
}
}
});
</script>
</html>