<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<style>
#q tr td {
width: 150px;
text-align: center;
margin-bottom: 5px;
}
#q tr:nth-child(2n) {
background: darkgray;
}
#q tr:nth-child(odd) {
background: white;
}
span{
color: red;
}
</style>
<script>
angular.module("lizhuang", [])
.controller("democ", function($scope, $http) {
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) {
$scope.persons = d.data;
$scope. add_sex='男';
});
$scope.getAge = function(bir) {
var b = new Date(bir).getYear(); //出生的年份
var nowb = new Date().getYear(); /*现在的年份*/
return nowb - b;
}
$scope.bumen = function(dname) {
if($scope.bumencha == undefined || $scope.bumencha == "") {
return true;
}
if(dname.indexOf($scope.bumencha) > -1) {
return true;
}
return false;
}
//删除
$scope.del = function(id) {
var index = 0;
for(var i in $scope.persons) {
if($scope.persons[i].id == id) {
index = i;
}
}
var f = confirm("确定删除吗?");
if(f) {
$scope.persons.splice(index, 1);
}
}
/*控制是否选择*/
$scope.ckall = function() {
for(var i in $scope.persons) {
$scope.persons[i].ck = $scope.flag;
}
}
/*批量删除*/
$scope.delpi = function() {
for(var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].ck == true) {
$scope.persons.splice(i, 1);
i--;
}
}
}
$scope.productPrice = "--请选择方法--";
$scope.save=function(){
$scope.errors=[];
if($scope.add_uname == undefined || $scope.add_uname == "") {
$scope.val_uname = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_uname = false;
}
if($scope.add_salar == undefined || $scope.add_salar == "") {
$scope.val_salar = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_salar = false;
}
if($scope.add_birth == undefined || $scope.add_birth == "") {
$scope.val_birth = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_birth = false;
}
var obj_d; //部门对象
if($scope.add_dname==undefined||$scope.add_dname==""){
$scope.errors.push(4);
}else{
/*判断部门所在对象,组装对象 */
if($scope.add_dname=="市场部"){
obj_d={id:1,name:$scope.add_dname};
}else if($scope.add_dname=="研发部"){
obj_d={id:2,name:$scope.add_dname};
}
}
/*添加*/
if($scope.errors.length == 0) {
$scope.persons.push({
"salary": $scope.add_salar,
"birthday": $scope.add_birth.valueOf(), //获取date日期的毫秒数
"department": obj_d,
"gender": $scope.add_sex,
"id": $scope.persons.length+100,
"name": $scope.add_uname
}
);
$scope.showAdd = false;
}
}
})
</script>
</head>
<body ng-app="lizhuang" ng-controller="democ">
<a href="http://127.0.0.1:8020/%E5%A5%BD%E5%A5%BD%E5%AD%A6%E4%B9%A0/%E6%9C%80%E5%90%8E%E4%B8%80%E6%AC%A1%E6%A8%A1%E6%8B%9F.html?__hbt=1516177565453">
<h1 ng-show="persons.length==0">请点击刷新</h1></a>
<div ng-show="persons.length>0">
<input placeholder="用户名搜索" ng-model="yonghucha" />
<input placeholder="部门搜索" ng-model="bumencha" />
<select ng-model="xinzi">
<option value="">{{productPrice}}</option>
<option value="-salary">从大到小</option>
<option value="+salary">从小到大</option>
</select>
<select ng-model="xb">
<option value="">请选择性别</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delpi()">批量删除</button>
<button ng-click="showAdd=true">新增用户</button>
<table border="1px" id="q">
<tr style="background: skyblue;">
<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>
<tr ng-repeat="d in persons|orderBy:'-birthday'|filter:{'name':yonghucha,'gender':xb}|orderBy:xinzi" ng-show="bumen(d.department.name)">
<td>
<input type="checkbox" ng-model="d.ck" />
</td>
<td>{{d.name}}</td>
<td>{{getAge(d.birthday)}}</td>
<td>{{d.gender}}</td>
<td>{{d.salary|currency:"¥:"}}</td>
<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{d.department.name}}</td>
<td><button ng-click="del(d.id)" style="background: springgreen;">删除</button></td>
</tr>
</table>
<div ng-show="showAdd">
<label>
用户名：<input type="text" ng-model="add_uname" placeholder="请输入用户名" /><span ng-show="val_uname">用户名不合法</span><br />
</label>
<label>
薪资：<input type="number" ng-model="add_salar" placeholder="请输入理想薪资" /><span ng-show="val_salar">薪资不合法</span><br />
</label>
<label>
出生日期：<input type="date" ng-model="add_birth" placeholder="请输入出生日期" /><span ng-show="val_birth">日期不合法</span><br />
</label>
<label>
性别:
<input type="radio" ng-model="add_sex" value="男" />男
<input type="radio" ng-model="add_sex" value="女" />女
</label><br />
<label>
部门
<select ng-model="add_dname">
<option value="">-请选择部门-</option>
<option>市场部</option>
<option>研发部</option>
</select><br />
</label>
<button ng-click="save()">保存</button>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<style>
#q tr td {
width: 150px;
text-align: center;
margin-bottom: 5px;
}
#q tr:nth-child(2n) {
background: darkgray;
}
#q tr:nth-child(odd) {
background: white;
}
span{
color: red;
}
</style>
<script>
angular.module("lizhuang", [])
.controller("democ", function($scope, $http) {
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) {
$scope.persons = d.data;
$scope. add_sex='男';
});
$scope.getAge = function(bir) {
var b = new Date(bir).getYear(); //出生的年份
var nowb = new Date().getYear(); /*现在的年份*/
return nowb - b;
}
$scope.bumen = function(dname) {
if($scope.bumencha == undefined || $scope.bumencha == "") {
return true;
}
if(dname.indexOf($scope.bumencha) > -1) {
return true;
}
return false;
}
//删除
$scope.del = function(id) {
var index = 0;
for(var i in $scope.persons) {
if($scope.persons[i].id == id) {
index = i;
}
}
var f = confirm("确定删除吗?");
if(f) {
$scope.persons.splice(index, 1);
}
}
/*控制是否选择*/
$scope.ckall = function() {
for(var i in $scope.persons) {
$scope.persons[i].ck = $scope.flag;
}
}
/*批量删除*/
$scope.delpi = function() {
for(var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].ck == true) {
$scope.persons.splice(i, 1);
i--;
}
}
}
$scope.productPrice = "--请选择方法--";
$scope.save=function(){
$scope.errors=[];
if($scope.add_uname == undefined || $scope.add_uname == "") {
$scope.val_uname = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_uname = false;
}
if($scope.add_salar == undefined || $scope.add_salar == "") {
$scope.val_salar = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_salar = false;
}
if($scope.add_birth == undefined || $scope.add_birth == "") {
$scope.val_birth = true; //val_uname 控制用户名不合法是否显示
$scope.errors.push(1);
} else {
$scope.val_birth = false;
}
var obj_d; //部门对象
if($scope.add_dname==undefined||$scope.add_dname==""){
$scope.errors.push(4);
}else{
/*判断部门所在对象,组装对象 */
if($scope.add_dname=="市场部"){
obj_d={id:1,name:$scope.add_dname};
}else if($scope.add_dname=="研发部"){
obj_d={id:2,name:$scope.add_dname};
}
}
/*添加*/
if($scope.errors.length == 0) {
$scope.persons.push({
"salary": $scope.add_salar,
"birthday": $scope.add_birth.valueOf(), //获取date日期的毫秒数
"department": obj_d,
"gender": $scope.add_sex,
"id": $scope.persons.length+100,
"name": $scope.add_uname
}
);
$scope.showAdd = false;
}
}
})
</script>
</head>
<body ng-app="lizhuang" ng-controller="democ">
<a href="http://127.0.0.1:8020/%E5%A5%BD%E5%A5%BD%E5%AD%A6%E4%B9%A0/%E6%9C%80%E5%90%8E%E4%B8%80%E6%AC%A1%E6%A8%A1%E6%8B%9F.html?__hbt=1516177565453">
<h1 ng-show="persons.length==0">请点击刷新</h1></a>
<div ng-show="persons.length>0">
<input placeholder="用户名搜索" ng-model="yonghucha" />
<input placeholder="部门搜索" ng-model="bumencha" />
<select ng-model="xinzi">
<option value="">{{productPrice}}</option>
<option value="-salary">从大到小</option>
<option value="+salary">从小到大</option>
</select>
<select ng-model="xb">
<option value="">请选择性别</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delpi()">批量删除</button>
<button ng-click="showAdd=true">新增用户</button>
<table border="1px" id="q">
<tr style="background: skyblue;">
<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>
<tr ng-repeat="d in persons|orderBy:'-birthday'|filter:{'name':yonghucha,'gender':xb}|orderBy:xinzi" ng-show="bumen(d.department.name)">
<td>
<input type="checkbox" ng-model="d.ck" />
</td>
<td>{{d.name}}</td>
<td>{{getAge(d.birthday)}}</td>
<td>{{d.gender}}</td>
<td>{{d.salary|currency:"¥:"}}</td>
<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{d.department.name}}</td>
<td><button ng-click="del(d.id)" style="background: springgreen;">删除</button></td>
</tr>
</table>
<div ng-show="showAdd">
<label>
用户名：<input type="text" ng-model="add_uname" placeholder="请输入用户名" /><span ng-show="val_uname">用户名不合法</span><br />
</label>
<label>
薪资：<input type="number" ng-model="add_salar" placeholder="请输入理想薪资" /><span ng-show="val_salar">薪资不合法</span><br />
</label>
<label>
出生日期：<input type="date" ng-model="add_birth" placeholder="请输入出生日期" /><span ng-show="val_birth">日期不合法</span><br />
</label>
<label>
性别:
<input type="radio" ng-model="add_sex" value="男" />男
<input type="radio" ng-model="add_sex" value="女" />女
</label><br />
<label>
部门
<select ng-model="add_dname">
<option value="">-请选择部门-</option>
<option>市场部</option>
<option>研发部</option>
</select><br />
</label>
<button ng-click="save()">保存</button>
</div>
</div>
</body>
</html>