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("myCtrl", 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: "张三",
sex: "男",
rq: new Date("2017-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.All = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.flag;
}
}
$scope.sc = function(i){
$scope.stu.splice(i,1);
}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<span>
姓名：<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: lemonchiffon;" ng-click="add()">添加</button><br />
<button style="background: lavender;" ng-click="del()">批量删除</button><br /></span>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="All()"</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>
<button ng-click="xg($index)">修改</button>
</td>
</tr>
</table>

</body>

</html>

猜你喜欢