<!DOCTYPE html>
<html>
<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: coral;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="button" ng-click="deleteMore()" value="批量删除" />
<input type="text" ng-model="chaKey" placeholder="请输入查询关键字" /><br />
<br />
姓名 : <input type="text" ng-model="name" />
性别 : <input type="radio" ng-model="sex" value="女" />女
<input type="radio" ng-model="sex" value="男" />男
生日 : <input type="date" ng-model="birthday" />
省份 :
<select id="pro" ng-model="pros" ng-init="pros='北京'" ο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="addDatas()" value="添加" /><br />
<br />
<table border="1px" width="650px" cellpadding="0" cellspacing="0">
<tr bgcolor="grey">
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in datas | filter : {name:chaKey}" 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="删除" />
</td>
</tr>
</table>
</center>
<p>{{datas}}</p>
<!--二级联动-->
<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;
}
}
//将遍历出来的城市追加到<option></option>中
for(var i in datas_citys) {
$("#city").append($("<option>" + datas_citys[i] + "</option>"))
}
}
</script>
<!--angular-->
<script>
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: '广东-广州'
}]*/
$http.get("bb.json").then(function(response){
$scope.datas=response.data;
})
//点击添加按钮
$scope.addDatas = function() {
var addData = {};
addData.name = $scope.name;
addData.sex = $scope.sex;
addData.birthday = $scope.birthday;
addData.address = $scope.pros + "-" + $scope.citys;
//判断非空验证
if(addData.name == undefined) {
alert("用户名不能为空");
} else if(addData.sex == undefined) {
alert("性别未选择");
} else if(addData.birthday == undefined) {
alert("请选择生日");
} else {
$scope.datas.push(addData);
}
}
//删除
$scope.deleteDatas = function(index) {
$scope.datas.splice(index, 1);
}
//批量删除
$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);
}
}
}
});
</script>
</body>
</html>
<html>
<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: coral;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="button" ng-click="deleteMore()" value="批量删除" />
<input type="text" ng-model="chaKey" placeholder="请输入查询关键字" /><br />
<br />
姓名 : <input type="text" ng-model="name" />
性别 : <input type="radio" ng-model="sex" value="女" />女
<input type="radio" ng-model="sex" value="男" />男
生日 : <input type="date" ng-model="birthday" />
省份 :
<select id="pro" ng-model="pros" ng-init="pros='北京'" ο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="addDatas()" value="添加" /><br />
<br />
<table border="1px" width="650px" cellpadding="0" cellspacing="0">
<tr bgcolor="grey">
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in datas | filter : {name:chaKey}" 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="删除" />
</td>
</tr>
</table>
</center>
<p>{{datas}}</p>
<!--二级联动-->
<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;
}
}
//将遍历出来的城市追加到<option></option>中
for(var i in datas_citys) {
$("#city").append($("<option>" + datas_citys[i] + "</option>"))
}
}
</script>
<!--angular-->
<script>
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: '广东-广州'
}]*/
$http.get("bb.json").then(function(response){
$scope.datas=response.data;
})
//点击添加按钮
$scope.addDatas = function() {
var addData = {};
addData.name = $scope.name;
addData.sex = $scope.sex;
addData.birthday = $scope.birthday;
addData.address = $scope.pros + "-" + $scope.citys;
//判断非空验证
if(addData.name == undefined) {
alert("用户名不能为空");
} else if(addData.sex == undefined) {
alert("性别未选择");
} else if(addData.birthday == undefined) {
alert("请选择生日");
} else {
$scope.datas.push(addData);
}
}
//删除
$scope.deleteDatas = function(index) {
$scope.datas.splice(index, 1);
}
//批量删除
$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);
}
}
}
});
</script>
</body>
</html>
6537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
