从网络获取数据

最新推荐文章于 2022-12-26 15:16:04 发布

无糖咖啡有点苦

最新推荐文章于 2022-12-26 15:16:04 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/qq1135058549/article/details/79092825

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
#sd {
border-radius: 10px; /*圆角边框 */
background-image: url(img/ss.jpg);
background-position: right;
background-repeat: no-repeat;
}

label {
display: block;
}

span {
color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script>
angular.module("gaoyn", [])
.controller("democ", function($scope, $http) {
$scope. add_sex='男';

//$http请求网络上的数据 get():请求指定路径的数据
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) { //d---->网址返回数据
// $scope.persons ==>视图中遍历的对象
$scope.persons = d.data; //json串根据键获取值对象.键名
});
//每行遍历都会调用getAge 传进来出生日期, 在函数
$scope.getAge = function(bir) {
var b = new Date(bir).getYear(); //出生的年份
var nowb = new Date().getYear();
return nowb - b;
}

$scope.del = function(id) { //js删除只能根据索引删除
//根据id查找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.ckall1 = function() {
console.log($scope.persons);
// 遍历数组,让数组的对象状态是否选中----->顶层的复选框
for(var i in $scope.persons) {
$scope.persons[i].ck = $scope.ckall;
}
}

$scope.delAll = function() {
for(var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].ck) { //判断当前行是否被勾选,如果勾选则进行删除操作
$scope.persons.splice(i, 1); //删除完毕后,下个对象自动移动到当前索引
i--;

}
}
}

$scope.getDname = function(dname) { //每行显示之前都自动调用getDname dname是当前行对应部门名称
//获取部门查询输入框的值
if($scope.seldepart == undefined || $scope.seldepart == "") { //判断无条件过滤,使其全部显示
return true; //return 结束方法的作用
}

//dname中是否含有输入框输入部分字符 var i= "我是八维讲师".indexOf("八维");
if(dname.indexOf($scope.seldepart) > -1) {
return true;
}
return false;
}

$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;
}

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
}
);
console.log($scope.persons)

}

}

})
</script>
</head>

<body ng-app="gaoyn" ng-controller="democ">

<h1 ng-show="persons.length==0">
页面无操作数据
</h1>


<div ng-show="persons.length>0">
<table border="1px">
<tr>
<td colspan="7">
<input type="checkbox" ng-model="ckall" ng-click="ckall1()" />
<button ng-click="delAll()">批量删除</button>
<input id="sd" ng-model="seldepart" placeholder="根据部门模糊查询" />
<button ng-click="showAdd=true">新增用户</button>
</td>

</tr>

<tr ng-repeat="d in persons|orderBy:'+birthday'" ng-show="getDname(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.department.name}}</td>
<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><button ng-click="del(d.id)">删除</button></td>
</tr>
</table>

</div>
<div ng-show="showAdd">
<label>
用户名:<input type="text" ng-model="add_uname" placeholder="请输入用户名" /><span ng-show="val_uname">用户名不合法</span>
</label>
<label>
工资:<input type="number" ng-model="add_salar" placeholder="请输入工资" /><span ng-show="val_salary">工资不合法</span>
</label>

<label>
生日:<input type="date" ng-model="add_birth" />

</label>
<label>
性别:
<input type="radio" ng-model="add_sex" value="男" />男

<input type="radio" ng-model="add_sex" value="女" />女
</label>

<label>
<select ng-model="add_dname">
<option value="">-请选择部门-</option>
<option>市场部</option>
<option>研发部</option>
</select>
</label>

<button ng-click="save()">保存</button>
</div>

</body>

</html>

无糖咖啡有点苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从网络获取数据

#sd { border-radius: 10px; /*圆角边框 */ background-image: url(img/ss.jpg); background-position: right; background-repeat: no-repeat; } label { display: block; } span { co
复制链接

扫一扫