<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even){
background-color: paleturquoise;
}
tbody tr:nth-child(odd){
background-color: lightcyan;
}
</style>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.kong=false;
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(pro){
$scope.products=pro.data;
});
$scope.getage=function(birth){
var q=new Date(birth).getYear();
var w=new Date().getYear();
return w-q;
}
//搜索
$scope.search="";
//删除
$scope.delProduct=function(clumn){
var arr=[];
if(confirm("您确定删除吗")){
for (index in $scope.products) {
if($scope.products[index].id==clumn){
$scope.products.splice(index,1);
}
}
}
}
//批量删除
$scope.delete=function(){
if(confirm("您确定删除吗")){
for (var i=0;i<$scope.products.length;i++) {
if($scope.products[i].state==true){
$scope.products.splice(i,1);
i--;
}
}
if($scope.products.length==0){
$scope.kong=true;
}
}
}
//全选反选
$scope.select=function(){
for (var i in $scope.products) {
$scope.products[i].state=$scope.selectAll;
}
}
//减一
$scope.less=function(id){
for (index in $scope.products) {
if($scope.products[index].id==id){
if($scope.products[index].num>1){
$scope.products[index].num--;
}else{
if(confirm("你确定删除吗")){
$scope.products.splice(index,1);
}
}
}
}
}
//添加
$scope.isshow=false;
$scope.add=function(){
$scope.arr=[];
var id=0;
for(index in $scope.pros){
if($scope.pros[index].id>id){
var id=$scope.pros[index].id
}
}
var newid=id+1;
var newname=$scope.add_name;
if(newname=="" || newname==undefined){
$scope.arr.push(1);
$scope.nn=("员工姓名不能为空");
}else{
$scope.nn="";
}
var newmoney=$scope.add_money;
if(newmoney=="" || newmoney==undefined){
$scope.arr.push(2);
$scope.ss=("员工薪资不能为空");
}else{
$scope.ss="";
}
var newgender=$scope.add_gender;
if(newgender=="" || newgender==undefined){
$scope.arr.push(3);
$scope.gg=("员工性别不能为空");
}else{
$scope.gg="";
}
var newbirthday=$scope.add_birthday;
if(newbirthday=="" || newbirthday==undefined){
$scope.arr.push(4);
$scope.bb=("出生日期不能为空");
}else{
$scope.bb="";
}
var obj;
if($scope.dname=="" || $scope.dname==undefined){
$scope.arr.push(5);
$scope.dd=("部门不能为空")
}else if($scope.dname=="市场部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}else if($scope.dname=="研发部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}
if($scope.arr.length==0){
$scope.products.push({
id:newid,
name:newname,
gender:newgender,
salary:newmoney,
birthday:newbirthday,
department:obj
});
$scope.isshow=false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入姓名" ng-model="search"/>
<select ng-model="xzpx">
<option value="">薪资排序</option>
<option value="+salary">升序</option>
<option value="-salary">降序</option>
</select>
<br />
<button ng-click="delete()">批量删除</button>
<button ng-click="isshow=true">添加</button>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-click="select()" ng-model="selectAll"></th>
<th>员工编号</th>
<th>姓名</th>
<th>年龄</th>
<th>薪资</th>
<th>性别</th>
<th>日期</th>
<th>部门</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{name:search} | orderBy:xzpx">
<td><input type="checkbox" ng-model="pro.state"></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{getage(pro.birthday)}}</td>
<td>
<button ng-click="less(pro.id)">-</button>
<span ng-hide="xg">
{{pro.salary | currency:"￥"}}</span>
<span ng-show="xg"><input type="text" ng-model="pro.salary"><button ng-click="xg=false">保存</button></span>
<button ng-click="pro.salary=pro.salary+1">+</button>
</td>
<td><span ng-hide="xg">{{pro.gender}}</span><span ng-show="xg"><input type="text" ng-model="pro.gender"><button ng-click="xg=false">保存</button></span></td>
<td>{{pro.birthday | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>{{pro.department.name}}</td>
<td><button ng-click="xg=true">修改</button></td>
<td><button ng-click="delProduct(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<p ng-show="kong">无操作数据</p>
<form ng-show="isshow">
<input type="text" placeholder="员工姓名" ng-model="add_name"/><span ng-if="nn.length!=0">{{nn}}</span><br/>
<input type="text" placeholder="员工薪资" ng-model="add_money"/><span ng-if="ss.length!=0">{{ss}}</span><br/>
<input type="radio" value="男" ng-model="add_gender"/>男
<input type="radio" value="女" ng-model="add_gender"/>女
<span ng-if="gg.length!=0">{{gg}}</span><br/>
<input type="date" placeholder="出生日期" ng-model="add_birthday"/><span ng-if="bb.length!=0">{{bb}}</span><br/>
<select ng-model="dname">
<option value="">请选择部门</option>
<option value="研发部">研发部</option>
<option value="市场部">市场部</option>
</select>
<span ng-if="dd.length!=0">{{dd}}</span><br />
<button ng-click="add()">保存</button>
</form>
</body>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even){
background-color: paleturquoise;
}
tbody tr:nth-child(odd){
background-color: lightcyan;
}
</style>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.kong=false;
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(pro){
$scope.products=pro.data;
});
$scope.getage=function(birth){
var q=new Date(birth).getYear();
var w=new Date().getYear();
return w-q;
}
//搜索
$scope.search="";
//删除
$scope.delProduct=function(clumn){
var arr=[];
if(confirm("您确定删除吗")){
for (index in $scope.products) {
if($scope.products[index].id==clumn){
$scope.products.splice(index,1);
}
}
}
}
//批量删除
$scope.delete=function(){
if(confirm("您确定删除吗")){
for (var i=0;i<$scope.products.length;i++) {
if($scope.products[i].state==true){
$scope.products.splice(i,1);
i--;
}
}
if($scope.products.length==0){
$scope.kong=true;
}
}
}
//全选反选
$scope.select=function(){
for (var i in $scope.products) {
$scope.products[i].state=$scope.selectAll;
}
}
//减一
$scope.less=function(id){
for (index in $scope.products) {
if($scope.products[index].id==id){
if($scope.products[index].num>1){
$scope.products[index].num--;
}else{
if(confirm("你确定删除吗")){
$scope.products.splice(index,1);
}
}
}
}
}
//添加
$scope.isshow=false;
$scope.add=function(){
$scope.arr=[];
var id=0;
for(index in $scope.pros){
if($scope.pros[index].id>id){
var id=$scope.pros[index].id
}
}
var newid=id+1;
var newname=$scope.add_name;
if(newname=="" || newname==undefined){
$scope.arr.push(1);
$scope.nn=("员工姓名不能为空");
}else{
$scope.nn="";
}
var newmoney=$scope.add_money;
if(newmoney=="" || newmoney==undefined){
$scope.arr.push(2);
$scope.ss=("员工薪资不能为空");
}else{
$scope.ss="";
}
var newgender=$scope.add_gender;
if(newgender=="" || newgender==undefined){
$scope.arr.push(3);
$scope.gg=("员工性别不能为空");
}else{
$scope.gg="";
}
var newbirthday=$scope.add_birthday;
if(newbirthday=="" || newbirthday==undefined){
$scope.arr.push(4);
$scope.bb=("出生日期不能为空");
}else{
$scope.bb="";
}
var obj;
if($scope.dname=="" || $scope.dname==undefined){
$scope.arr.push(5);
$scope.dd=("部门不能为空")
}else if($scope.dname=="市场部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}else if($scope.dname=="研发部"){
obj={id:1,name:$scope.dname};
$scope.dd="";
}
if($scope.arr.length==0){
$scope.products.push({
id:newid,
name:newname,
gender:newgender,
salary:newmoney,
birthday:newbirthday,
department:obj
});
$scope.isshow=false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="请输入姓名" ng-model="search"/>
<select ng-model="xzpx">
<option value="">薪资排序</option>
<option value="+salary">升序</option>
<option value="-salary">降序</option>
</select>
<br />
<button ng-click="delete()">批量删除</button>
<button ng-click="isshow=true">添加</button>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-click="select()" ng-model="selectAll"></th>
<th>员工编号</th>
<th>姓名</th>
<th>年龄</th>
<th>薪资</th>
<th>性别</th>
<th>日期</th>
<th>部门</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{name:search} | orderBy:xzpx">
<td><input type="checkbox" ng-model="pro.state"></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{getage(pro.birthday)}}</td>
<td>
<button ng-click="less(pro.id)">-</button>
<span ng-hide="xg">
{{pro.salary | currency:"￥"}}</span>
<span ng-show="xg"><input type="text" ng-model="pro.salary"><button ng-click="xg=false">保存</button></span>
<button ng-click="pro.salary=pro.salary+1">+</button>
</td>
<td><span ng-hide="xg">{{pro.gender}}</span><span ng-show="xg"><input type="text" ng-model="pro.gender"><button ng-click="xg=false">保存</button></span></td>
<td>{{pro.birthday | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>{{pro.department.name}}</td>
<td><button ng-click="xg=true">修改</button></td>
<td><button ng-click="delProduct(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<p ng-show="kong">无操作数据</p>
<form ng-show="isshow">
<input type="text" placeholder="员工姓名" ng-model="add_name"/><span ng-if="nn.length!=0">{{nn}}</span><br/>
<input type="text" placeholder="员工薪资" ng-model="add_money"/><span ng-if="ss.length!=0">{{ss}}</span><br/>
<input type="radio" value="男" ng-model="add_gender"/>男
<input type="radio" value="女" ng-model="add_gender"/>女
<span ng-if="gg.length!=0">{{gg}}</span><br/>
<input type="date" placeholder="出生日期" ng-model="add_birthday"/><span ng-if="bb.length!=0">{{bb}}</span><br/>
<select ng-model="dname">
<option value="">请选择部门</option>
<option value="研发部">研发部</option>
<option value="市场部">市场部</option>
</select>
<span ng-if="dd.length!=0">{{dd}}</span><br />
<button ng-click="add()">保存</button>
</form>
</body>