json串的增删改查操作

最新推荐文章于 2023-10-26 11:14:52 发布

CHHDEVIL

最新推荐文章于 2023-10-26 11:14:52 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41637420/article/details/79100252

这个示例展示了如何在AngularJS应用中进行JSON数据的增删改查操作。通过控制器`myCtrl`，实现了从服务器获取JSON数据，动态添加、修改、删除员工信息，并提供了按部门筛选和批量删除的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>

var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.depars=[{id:1,name:'研发部'},{id:2,name:'市场部'}];
$scope.xg=false;

$scope.rk=false;
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(a){

$scope.users=a;

})
var obj;
$scope.bc= function(){
for(var i in $scope.depars){
if($scope.depars[i].name==$scope.add_name){

obj= $scope.depars[i];

}

}

$scope.users.push({
name:$scope.add_uname,
gender:$scope.add_sex,
salary:$scope.add_salary,
birthday:$scope.add_birth,
id:$scope.users.length+100,
department:obj

})
$scope.add_salary="";
$scope.add_uname="";
$scope.add_sex="";
$scope.add_salary="";
$scope.add_birth="";
obj ="";
$scope.rk=false;
}

$scope.getage=function(a){
var da=new Date(a);
var dat=new Date();
var s= dat.getYear();
var s1=da.getYear();

return s-s1;

}
$scope.bm=function(sdd){

if($scope.bmc==undefined||$scope.bmc==""){

return true;
}
if(sdd.indexOf($scope.bmc)){

return true;

}else{

return false;
}

}
$scope.pl= function (){

for(var i=0;i<$scope.users.length;i++){

if($scope.users[i].statr==true){

$scope.users.splice(i,1);

i--;
}
}

}
})

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<button ng-click="rk=true">入库</button>
<input type="text" placeholder="部门" ng-model="bmc" />
<button ng-click="pl()">批量删除</button>
<table border="1" width="800">
<thead>
<tr>
<td><input type="checkbox"></td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>性别</td>
<td>薪资</td>
<td>出生日期</td>
<td>部门的名称</td>
<td>操作</td>
</tr>
</thead>
<tr ng-repeat="user in users" ng-show="bm(user.department.name)">
<td><input type="checkbox" ng-model="user.statr"></td>
<td>{{user.name}}</td>
<td>{{getage(user.birthday)}}</td>
<td>{{user.gender}}</td>
<td>{{user.salary}}<span ng-show="xg"><input ng-model="user.salary"> <button ng-click="xg=fales">保存</button></span></td>
<td>{{user.birthday | date:"yyyy-MM-dd"}}</td>
<td>{{user.department.name}}</td>
<td><button ng-click="xg=true">修改</button></td>
</tr>
</tbody>
</table>
<div ng-show="rk">
商品名称<input type="text" ng-model="add_uname" /><span></span><br />
男<input type="radio" ng-model="add_sex" value="男"/>
女<input type="radio" ng-model="add_sex" value="女"/><span></span><br />
出生时间<input type="date" ng-model="add_birth"/><span></span><br />
薪资<input type="text" ng-model="add_salary" /><span></span><br />
<select ng-model="add_name"><span></span><br />
<option value="">选择部门</option>
<option>研发部</option>
<option>市场部</option>
</select>
<button ng-click="bc()">保存</button>
</div>
</body>

</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>

var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.depars=[{id:1,name:'研发部'},{id:2,name:'市场部'}];
$scope.xg=false;

$scope.rk=false;
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(a){

$scope.users=a;

})
var obj;
$scope.bc= function(){
for(var i in $scope.depars){
if($scope.depars[i].name==$scope.add_name){

obj= $scope.depars[i];

}

}

$scope.users.push({
name:$scope.add_uname,
gender:$scope.add_sex,
salary:$scope.add_salary,
birthday:$scope.add_birth,
id:$scope.users.length+100,
department:obj

})
$scope.add_salary="";
$scope.add_uname="";
$scope.add_sex="";
$scope.add_salary="";
$scope.add_birth="";
obj ="";
$scope.rk=false;
}

$scope.getage=function(a){
var da=new Date(a);
var dat=new Date();
var s= dat.getYear();
var s1=da.getYear();

return s-s1;

}
$scope.bm=function(sdd){

if($scope.bmc==undefined||$scope.bmc==""){

return true;
}
if(sdd.indexOf($scope.bmc)){

return true;

}else{

return false;
}

}
$scope.pl= function (){

for(var i=0;i<$scope.users.length;i++){

if($scope.users[i].statr==true){

$scope.users.splice(i,1);

i--;
}
}

}
})

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<button ng-click="rk=true">入库</button>
<input type="text" placeholder="部门" ng-model="bmc" />
<button ng-click="pl()">批量删除</button>
<table border="1" width="800">
<thead>
<tr>
<td><input type="checkbox"></td>
<td>员工姓名</td>
<td>员工年龄</td>
<td>性别</td>
<td>薪资</td>
<td>出生日期</td>
<td>部门的名称</td>
<td>操作</td>
</tr>
</thead>
<tr ng-repeat="user in users" ng-show="bm(user.department.name)">
<td><input type="checkbox" ng-model="user.statr"></td>
<td>{{user.name}}</td>
<td>{{getage(user.birthday)}}</td>
<td>{{user.gender}}</td>
<td>{{user.salary}}<span ng-show="xg"><input ng-model="user.salary"> <button ng-click="xg=fales">保存</button></span></td>
<td>{{user.birthday | date:"yyyy-MM-dd"}}</td>
<td>{{user.department.name}}</td>
<td><button ng-click="xg=true">修改</button></td>
</tr>
</tbody>
</table>
<div ng-show="rk">
商品名称<input type="text" ng-model="add_uname" /><span></span><br />
男<input type="radio" ng-model="add_sex" value="男"/>
女<input type="radio" ng-model="add_sex" value="女"/><span></span><br />
出生时间<input type="date" ng-model="add_birth"/><span></span><br />
薪资<input type="text" ng-model="add_salary" /><span></span><br />
<select ng-model="add_name"><span></span><br />
<option value="">选择部门</option>
<option>研发部</option>
<option>市场部</option>
</select>
<button ng-click="bc()">保存</button>
</div>
</body>

</html>