<!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("myctr", function($scope) {
i = 0;
//定义城市
$scope.pros = [{
pro: "北京",
children: ["西二旗", "上地"]
}, {
pro: "河北",
children: ["石家庄", "邯郸"]
}];
$scope.citys = $scope.pros[0].children;
$scope.changecity = 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="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="changecity(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 styng-click="All()" style="background: yellow;">全选/反选</button>
<button style="background-color: chartreuse ;" ng-click="del()">批量删除</button>
<br>
<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></td>
</tr>
</table>
</body>
</html>
二级联动(angular实现)
最新推荐文章于 2019-10-11 10:56:31 发布