angular综合(二级联动,增删改查)

最新推荐文章于 2019-10-11 10:56:31 发布

原创最新推荐文章于 2019-10-11 10:56:31 发布 · 434 阅读

1 ·

CC 4.0 BY-SA版权

这个博客演示了如何在 AngularJS 应用中实现二级联动（省市区选择），并展示了数据的增删改查功能。通过加载 JSON 数据，动态生成下拉选项，并提供了非空验证、查询、排序以及批量删除等功能。

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

<!DOCTYPE html>
<html>

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

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

<script>
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope, $http) {
$http.get("bb.json").then(function(response) {
$scope.datass = response.data;
});
/*地址*/
$scope.prodata = [];
$http.get("cc.json").then(function(response) {
$scope.prodata = response.data;
});

/* $scope.a = false;
$scope.add = function() {
$scope.a = true;
}*/
/*添加*/
$scope.YesAdd = function() {
var addData = {};
addData.name = $scope.name;
addData.sex = $scope.sex;
addData.birthday = $scope.birthday;
addData.address = $scope.pros + "-" + $scope.citys;
//$scope.datas.push(addData);
//判断非空验证
if(addData.name == undefined) {
alert("用户名不能为空");
} else if(addData.sex == undefined) {
alert("性别未选择");
} else if(addData.birthday == undefined) {
alert("请选择生日");
} else {

/*原有的*/
/* $scope.datass.push(addData);*/

/*后改的*/
$scope.datass.push({"name":$scope.name,"sex":$scope.sex,"birthday":$scope.birthday,"address":$scope.pros.pro+"-"+$scope.city});

$scope.add=false;
alert("添加成功");
}
}
/*删除*/
$scope.delete = function(index) {
$scope.datass.splice(index, 1);
}
//批量删除
$scope.piliang = function() {
if($scope.checkAll) { //全部选中
$scope.datass = [];
$scope.checkAll = false;
} else {
//获取选中的复选框
var checked = $("input[type='checkbox']:checked");
for(var i = checked.length - 1; i >= 0; i--) {
var c = checked[i].value;
$scope.datass.splice(c, 1);
}
}
}

/*查询*/
$scope.query = function() {
$scope.Aquer = $scope.Aquery;
}
/*排序*/
$scope.pai = "";

/*后期加的修改*/
/*点击修改*/
$scope.update=function (dname) {
var datas=$scope.datass;
for (var i = 0; i < datas.length; i++) {
if (datas[i].name==dname) {
$scope.uname=datas[i].name;
$scope.usex=datas[i].sex;
$scope.ubirthday=new Date(datas[i].birthday);
for (var j = 0; j < $scope.prodata.length; j++) {
if ($scope.prodata[j].pro==datas[i].address.split("-")[0]) {
$scope.upros=$scope.prodata[j];
$scope.ucity=datas[i].address.split("-")[1];
break;
}
}
$scope.Yesupdate=function () {
datas[i].name=$scope.uname;
datas[i].sex=$scope.usex;
datas[i].birthday=$scope.ubirthday;
datas[i].address=$scope.upros.pro+"-"+$scope.ucity;
$scope.xiu=false;
}
break;
}
}
$scope.xiu=!$scope.xiu;;
}

});
</script>

</head>

<body ng-app="MyApp" ng-controller="MyCtrl">
<center>
<div>
<input type="text" placeholder="请输入要查询的关键字" ng-model="Aquery" />
<input type="button" value="查询" ng-click="query()" />
</div>
<br />
<div>
排序:
<select ng-model="pai">
<option value="birthday">根据出生日期排序</option>
<option value="-birthday">根据出生日期排序(倒叙)</option>
</select>
</div>
<br/>
<div>
<input type="button" value="批量删除" ng-click="piliang()" />
<input type="button" value="添加" ng-click="add=!add" />

</div>
<br/>

<div ng-show="add">
名字:<input type="text" placeholder="请输入名字" ng-model="name" /><br/> 性别:
<input type="radio" ng-model="sex" value="男" name="name" />男<input type="radio" value="女" ng-model="sex" name="name" />女<br /> 生日:
<input type="date" ng-model="birthday" /><br /> 省份:


<select ng-model="pros" ng-options="pros.pro for pros in prodata">
<option value="">--请选择省份--</option>
</select>
市：
<select ng-model="city" ng-options="city for city in pros.citys">
<option value="">--请选择城市--</option>
</select><br />




<br />
<input type="button" value="确认添加 " ng-click="YesAdd()" />
</div><br />

<table border="1px" cellpadding="0" cellspacing="0">
<tr style="background-color: gray">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>名字</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in datass | filter :{name :Aquer} | orderBy: pai">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}" /></td>
<td>{{a.name}}</td>
<td>{{a.sex}}</td>
<td>{{a.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{a.address}}</td>
<td>
<input type="button" value="删除 " ng-click="delete($index)" /><br />
<input type="button" value="修改 " ng-click="update(a.name)" />
</td>
</tr>
</table>


<div ng-show="xiu">
姓名：<input type="text" ng-model="uname" /><br /> 性别：
<input type="radio" value="男" ng-model="usex" />男 <input type="radio" value="女" ng-model="usex" />女<br /> 生日：
<input type="date" ng-model="ubirthday" /><br /> 省份：
<br /> 省：
<select ng-model="upros" ng-options="pros.pro for pros in prodata">
<option value="">--请选择省份--</option>
</select>
市：
<select ng-model="ucity" ng-options="city for city in upros.citys">
<option value="">--请选择城市--</option>
</select><br />
<input type="button" value="保存修改" ng-click="Yesupdate()" />
</div>

<p>{{datass}}</p>
</center>

</body>

</html>