您的位置：首页 > 理论基础 > 计算机网络
获取网络数据增删

2018-01-18 09:54 274 查看
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
label{
display: block;
}

span{
color: red;
}
</style>
<script>
angular.module("gaoynapp", [])
.controller("con", function($scope, $http) {

$scope.depars=[{id:1,name:'研发部'},{id:2,name:'市场部'}];

$scope.add_sex='男';

$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(a) {
$scope.persons = a; //a===>http://接口地址 返回的数据自动参数a
})

//计算年龄的函数
$scope.getAge = function(birth) {
//
var y = new Date(birth).getYear(); //每个对象年龄

var nowy = new Date().getYear();

return nowy - y;
}

$scope.del = function(id) {
var f = confirm("确定删除?");
if(f) {  //如果点击了确定
//根据id查找所在索引,根据索引进行删除
for(var i in $scope.persons) {
if($scope.persons[i].id == id) {
$scope.persons.splice(i, 1);
}
}
}
}

//存放删除数据

//控制是否选择
$scope.ckall=function(){
console.log($scope.persons,"===");
for(var i in $scope.persons){
$scope.persons[i].ck=$scope.flag;

}
}

//批量删除
$scope.delall=function(){
//批量删除,必须使用for循环,不能使用for in循环
confirm("")

for(var i=0;i<$scope.persons.length;i++){
if($scope.persons[i].ck==true ){ //判断当前行是否勾选
$scope.persons.splice(i,1); //删除
i--; //删除时,从当前删除的索引开始
}
}
}

//
$scope.selBM=function(dname){
//如果查询部门的输入框没有输入内容,查询所有
if($scope.cxbm==undefined || $scope.cxbm==""){
return true;
}

//模糊查询,查找部门名称中是否含有  输入框输入的内容
if(dname.indexOf($scope.cxbm)>-1){
return true;
}

return false;
}

$scope.save=function(){

$scope.errors=[];  //存放错误信息

//判断姓名是否合法
if($scope.add_uname==undefined || $scope.add_uname==""){
$scope.val_uname=true;
$scope.errors.push(1);
}else{
$scope.val_uname=false;
}

//判断工资是否输入
if($scope.add_salar==undefined || $scope.add_salar==""){
$scope.val_salar=true;
$scope.errors.push(2);
}else{
$scope.val_salar=false;
}

var obj_dep;
if($scope.add_depart==undefined||$scope.add_depart==""){
$scope. val_depart=true;
$scope.errors.push(3);
}else{
//获取部门的名字
console.log("部门名字",$scope.add_depart);

for(var i in $scope.depars){
if($scope.depars[i].name==$scope.add_depart){
obj_dep=$scope.depars[i];
}
}
}

if($scope.errors.length==0){
//添加
$scope.persons.push(
{
salary:$scope.add_salar,
birthday:755884805251,
department:obj_dep,
gender:$scope.add_sex,
id:$scope.persons.length+100,
name:$scope.add_uname
}
);

//添加完毕后,清空输入框输入内容
$scope.add_uname="";
$scope.add_salar="";

$scope.show_add=false;

}

}

})
</script>
</head>
<body ng-app="gaoynapp" ng-controller="con">
<h2 ng-show="persons.length==0">
当前页面为空
</h2>

<div ng-show="persons.length!=0">
<input type="text" placeholder="根据部门模糊查询..."  ng-model="cxbm" />
<button ng-click="delall()">批量删除</button>
<button ng-click="show_add=true">添加</button>

<table border="1px">
<tr>
<td>
<input type="checkbox" ng-model="flag" ng-click="ckall()"  />
</td>
</tr>
<tr ng-repeat="d in persons|orderBy:'-birthday'" ng-show="selBM(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)">删除</button></td>
</tr>
</table>

</div>
<!-- 添加的form表单 -->
<div ng-show="show_add">
<label>
<input type="text" placeholder="请输入用户名" ng-model="add_uname"  /><span ng-show="val_uname">请输入用户名</span>

</label>
<label>
<input  placeholder="请输入工资" type="number"  ng-model="add_salar" /><span ng-show="val_salar">请输入工资</span>
</label>

<label>
<select ng-model="add_depart">
<option value="">-请选择所在部门-</option>
<option>市场部</option>
<option>研发部</option>
</select>
<span ng-show="val_depart">请选择有效部门</span>
</label>

<label>
<input type="radio" ng-model="add_sex" value="男" />男
<input type="radio" ng-model="add_sex"   value="女" />女
</label>
<label>
生日<input type="date" ng-model="add_birth" />
</label>

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

</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航