http数据加载2

最新推荐文章于 2020-04-23 15:36:31 发布

detelebest

最新推荐文章于 2020-04-23 15:36:31 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/detelebest/article/details/79103812

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
tr:nth-child(2n){
background: darkgray;
}
tr:nth-child(2n-1){
background: yellow;
}
</style>
<script src="../day10anglajs/angular.min.js"></script>
<script>
angular.module("mjb",[])
.controller("democ",function($scope,$http){
$scope.sexs='男'
$scope.divshow=false;
$scope.nameshow=false;
$scope.salaryshow=false;
$scope.departmentshow=false;

$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(g){
$scope.persons=g.data;//在网络上获取数据
});
//年龄
$scope.getage=function(bir){
var b = new Date(bir).getYear();
var nb = new Date().getYear();
return nb-b;
}
//删除
$scope.del=function(id){
var index = 0;
for(var i in $scope.persons){
if($scope.persons[i].id==id){
index=i
}
}
var c = confirm("确定取消");
if(c){
$scope.persons.splice(index,1);
}
}
//进行全选和反全选
$scope.ckall=function(){
for(var i in $scope.persons){
$scope.persons[i].ck=$scope.flag;
}
}
//进行批量删除
$scope.deleall=function(){
for(var i = 0;i<$scope.persons.length;i++){
if($scope.persons[i].ck==true){
$scope.persons.splice(i,1);
i--
}

}
}
//根据部门去查询
$scope.selectbm=function(selbm){
if($scope.named==""||$scope.named==undefined){
return true;
}
if(selbm.indexOf($scope.named)>-1){
return true;
}
return false;
}
$scope.add=function(){
$scope.divshow=true;
}
//保存的方法
$scope.addsave=function(){
$scope.errors=[];
if($scope.addname==""||$scope.addname==undefined){
$scope.nameshow=true;
$scope.errors.push(1);
}else{
$scope.nameshow=false;
}
if($scope.addsalary==""||$scope.addsalary==undefined){
$scope.salaryshow=true;
$scope.errors.push(2);
}else{
$scope.salaryshow=false;
}
if($scope.addbirthday==""||$scope.addbirthday==undefined){
$scope.birthdayshow=true;
$scope.errors.push(3);
}else{
$scope.birthdayshow=false;
}

var obj;//部门的对象
if($scope.add_dname==""||$scope.add_dname==undefined){
$scope.errors.push(4);
$scope.departmentshow=true;
}else{
if($scope.add_dname=="市场部"){
obj = {id:1,name:$scope.add_dname}
}else if($scope.add_dname=="研发部"){
obj = {id:4,name:$scope.add_dname}
}
}
//向表内添加数据
if($scope.errors.length==0){
$scope.persons.push({
name:$scope.addname,
salary:$scope.addsalary,
gender:$scope.sexs,
department:obj,
birthday:$scope.addbirthday.valueOf()
})
}
}
})
</script>
<style>
label{
display: block;

}
span{
color: red;
}
</style>
</head>
<body ng-app="mjb" ng-controller="democ">
<input type="text" placeholder="根据姓名查询" ng-model="names"/>
<input type="text" placeholder="根据部门查询" ng-model="named"/>
<select ng-model="px">
<option value="">薪资排序</option>
<option value="+salary">升序</option>
<option value="-salary">降序</option>
</select>
<input type="button" ng-click="deleall()" value="批量删除" />
<input type="button" ng-click="add()" value="添加数据" />
<table style="width: 1000px;"border="1px">
<tr align="center">
<td><input type="checkbox" ng-click="ckall()" ng-model="flag"/> </td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>员工性别</td>
<td>员工薪资</td>
<td>出生日期</td>
<td>部门名称</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in persons|filter:{name:names}|orderBy:px" ng-show="selectbm(s.department.name)">
<td><input type="checkbox" ng-model="s.ck"/> </td>
<td>{{s.name}}</td>
<td>{{getage(s.birthday)}}</td>
<td>{{s.gender}}</td>
<td>{{s.salary|currency:"¥"}}</td>
<td>{{s.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{s.department.name}}</td>
<td><input type="button" value="删除" ng-click="del(s.id)"/> </td>
</tr>
</table>
<div ng-show="divshow">
<label>
<input type="text" ng-model="addname" placeholder="请输入姓名" /><span ng-show="nameshow">用户名格式不正确</span>
</label>
<label>
<input type="number" ng-model="addsalary" placeholder="请输入工资" /><span ng-show="salaryshow">工资不能为空</span>
</label>
<label>
<input type="date" ng-model="addbirthday" placeholder="请输入生日" /><span ng-show="birthdayshow">生日不能为空</span>
</label>
<label>
性别:<input type="radio" ng-model="sexs" value="男" />男
<input type="radio" ng-model="sexs" value="女" />女
</label>
<label>
<select ng-model="add_dname">
<option value="">部门</option>
<option>研发部</option>
<option>市场部</option>
</select>
<span ng-show="departmentshow">部门不能为空</span>
</label>
<input type="button" value="保存" ng-click="addsave()"/>
</div>
</body>
</html>

detelebest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
http数据加载2

tr:nth-child(2n){background: darkgray;}tr:nth-child(2n-1){background: yellow;}angular.module("mjb",[]).controller("democ",function($scope,$http){$scope.sexs='男'$scope.divshow=f
复制链接

扫一扫