angular实现二级联动

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myctr", function($scope) {
i = 0;
//定义省份
$scope.pros = [{
pro: "北京",
children: ["西二旗", "上地"]
}, {
pro: "河北",
children: ["石家庄", "邯郸"]
}];
$scope.citys = $scope.pros[0].children;
//改变城市下拉菜单的数据源;
$scope.changcity = function(pro) {
$scope.citys = pro.children;
}
$scope.stu = [{
name: "张a",
sex: "男",
rq: new Date("1998-9-" + (i + 1)),
zhuzhi: "北京西二旗"
}, {
name: "张b",
sex: "男",
rq: new Date("1998-9-" + (i + 1)),
zhuzhi: "北京西二旗"
}, {
name: "张c",
sex: "男",
rq: new Date("1998-9-" + (i + 1)),
zhuzhi: "北京西二旗"
}, {
name: "张d",
sex: "男",
rq: new Date("1998-9-" + (i + 1)),
zhuzhi: "北京西二旗"
} ];

//添加
$scope.add = function() {
$scope.stu.push({
name: $scope.n,
sex: $scope.sex,
rq: $scope.r,
zhuzhi: $scope.s1.pro + $scope.s2
})
}
//批量删除
$scope.del = function() {
//遍历数组
for(var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck) {
$scope.stu.splice(i, 1);
i--;
}
}
}

//全选
$scope.checkAll = function() {
for(var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.flag;
}
}
//全选
$scope.checkAll = function() {
for(var i = 0; i < $scope.stu.length; i++) {
// $scope.stu[i].ck = $scope.flag;
$scope.stu[i].ck = !$scope.stu[i].ck;
}
}
//删除
$scope.sc = function(i) {
$scope.stu.splice(i, 1);
}
})
</script>
</head>

<body ng-app="myApp" ng-controller="myctr">

姓名:<input type="text" placeholder="请输入姓名" ng-model="n" /> 性别:
<select ng-model="sex">

<option>男</option>
<option>女</option>
</select>
生日:<input type="date" ng-model="r" />


住址：
<select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changcity(s1)">
<option value="">--请选择省份--</option>

</select>

市：
<select ng-init="s2=citys[0]" ng-model="s2" ng-options="c for c in citys">
<option value="">--请选择城市--</option>
</select>
<button style="background: lawngreen;" ng-click="add()">添加</button><br>
<button type="checkbox" ng-click="checkAll()" >全选/反选</button>
<button style="background-color: chartreuse ;" ng-click="del()">批量删除</button></span>
<br>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="checkAll()" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat=" s in stu">
<td><input type="checkbox" ng-model="s.ck" /></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.rq | date:'MM-dd hh:mm'}}</td>
<td>{{s.zhuzhi}}</td>
<td><button ng-click="sc($index)">删除</button></td>
</tr>
</table>

</body>

</html>

angular实现二级联动

猜你喜欢