<head>
<meta charset="UTF-8">
<title>月考练习</title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<style>
table {
text-align: center;
}
.red {
background-color: cornflowerblue;
}
.yellow {
background-color: rosybrown;
}
ul li {
list-style: none;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="button" ng-click="deleteMore()" value="批量删除" /><br />
<br />
<form>
姓名 : <input type="text" ng-model="name" /> 性别 :
<select ng-init="sex='女'" ng-model="sex">
<option>男</option>
<option>女</option>
</select> 生日 : <input type="date" ng-model="birthday" /> 省份 :
<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getCitys()">
<option value="">--请选择省份--</option>
<option>北京</option>
<option>广东</option>
</select>
城市 :
<select id="city" ng-model="citys" ng-init="citys='海淀'">
<option value="">--请选择城市--</option>
<option>海淀</option>
<option>昌平</option>
</select>
<input type="button" ng-click="add()" value="添加" /><br />
</form>
<br />
<table border="1px" width="650px" cellpadding="0" cellspacing="0">
<tr bgcolor="grey">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas" class="{{$index%2?'red':'yellow'}}">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}" /></td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{x.address}}</td>
<td>
<input type="button" ng-click="deleteDatas($index)" value="删除" />
<input type="button" ng-click="updateDatas(x.name)" value="修改" />
</td>
</tr>
</table>
<br />
<div ng-show="updateShow">
<ul>
<li> 姓名 : <input type="text" ng-model="upName" /></li>
<li>性别 : <input type="radio" ng-model="upSex" value="男" />男
<input type="radio" ng-model="upSex" value="女" />女
</li>
<li>生日 : <input type="date" ng-model="upBirthday" /></li>
<li>住址 : <input type="text" ng-model="upAddress" />
</li>
<li><input type="button" ng-click="subUpdate()" value="提交修改" /></li>
</ul>
</div>
</center>
<!--通过Jquery实现二级联动-->
<script>
/*数组*/
var datas = [{
pro: "北京",
citys: ["海淀", "昌平"]
}, {
pro: "广东",
citys: ["深圳", "广州"]
}];
function getCitys() {
//把之前 的城市数据清空
$("#city option").remove();
var datas_citys = [];
//获取当前选择的省份
var p = $("#pro").val();
for(var i in datas) {
if(datas[i].pro == p) {
datas_citys = datas[i].citys;
break;
}
}
//根据datas_citys数组的内容
/*2 把城市封装到option 把option追加到城市的select */
for(var i in datas_citys) {
var op = $("<option>" + datas_citys[i] + "</option>")
$("#city").append(op);
}
}
</script>
<!--angular-->
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
name: '张三',
sex: '男',
birthday: new Date('1995-04-24'),
address: '北京-海淀'
}, {
name: '李四',
sex: '女',
birthday: new Date('1995-05-24'),
address: '广东-广州'
}, {
name: '王三',
sex: '男',
birthday: new Date('1995-04-24'),
address: '广东-广州'
}]
//批量删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.datas = [];
$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.datas.splice(c, 1);
}
}
}
//删除
$scope.deleteDatas = function(index) {
$scope.datas.splice(index, 1);
}
//修改
var upData = "";
$scope.updateDatas = function(xname) {
//显示修改区域
$scope.updateShow = true;
//回显
for(var i = 0; i < $scope.datas.length; i++) {
var name = $scope.datas[i].name;
if(name == xname) {
upData = $scope.datas[i];
break;
}
}
$scope.upName = upData.name;
$scope.upSex = upData.sex;
$scope.upBirthday = upData.birthday;
$scope.upAddress = upData.address;
}
//点击提交修改
$scope.subUpdate = function() {
upData.name = $scope.upName;
upData.sex = $scope.upSex;
upData.birthday = $scope.upBirthday;
upData.address = $scope.upAddress;
//隐藏修改区域
$scope.updateShow = false;
}
//添加
$scope.add = function() {
var addData = {};
addData.name = $scope.name
addData.sex = $scope.sex;
addData.birthday = $scope.birthday;
addData.address = $scope.pro + "-" + $scope.citys;
//添加之前先判断合法吗
if(addData.name == undefined || addData.name.length < 3 || addData.name.length > 30) {
alert("用户名不合法");
} else if(addData.sex == undefined) {
alert("性别未选择");
} else if(addData.birthday == undefined) {
alert("请选择生日");
} else {
$scope.datas.push(addData);
}
}
});
</script>
</body>